Microfrontends adapt to view size with slight delay
Closed this issue · 2 comments
Describe the bug
The document root element (<html>) of content loaded in an iframe (microfrontend view) adapts to the iframe size (view size) with a slight delay, noticeable when resizing the iframe (view).
The delay could only be observed if the iframe content is loaded from a different origin than the host origin or, on localhost, only if using different protocols (e.g., serving the host from HTTPS and the iframe content from HTTP).
To Reproduce
Steps to reproduce the behavior:
- Open two microfrontends and place them side by side
- Resize the views using the vertical splitter
- See that (right-aligned) content of the right view flickers
Environment
Please complete the following information:
- SCION Workbench version:
18.0.0-beta.7 - Browser: Chrome 130.0.6723.70
- OS: Windows 11
- Device: Desktop
The problem could also be reproduced without SCION Workbench by using two iFrames side by side. The issue can probably not be fixed in the SCION Workbench since the browser adapts the iframe content size with some delay (maybe because iframes have lower priority).
We have identified performance degradation for iframes not deployed in the same subdomain, most likely to throttle third-party iframes such as analytics and tracking tools. Performance degradation manifests, for example, when resizing the iframe where iframe content adapts to the iframe size with a slight delay. We therefore recommend deploying the host and micro applications to the same subdomain but in different second-level subdomains. The cross-origin policy still applies, i.e., a micro app cannot access other browsing contexts.
Examples of second-level subdomains (*.app.domain.com):
- app1.app.domain.com
- app2.app.domain.com
- app3.app.domain.com