Skip to content

Pre-style to avoid Layout Shift - #487

Merged
prushforth merged 2 commits into
Maps4HTML:masterfrom
Malvoz:css-avoid-layout-shift
Jul 20, 2021
Merged

Pre-style to avoid Layout Shift#487
prushforth merged 2 commits into
Maps4HTML:masterfrom
Malvoz:css-avoid-layout-shift

Conversation

@Malvoz

@Malvoz Malvoz commented Jul 18, 2021

Copy link
Copy Markdown
Member

Fix #376.

intrinsic-size.mp4

I'm only adding these styles to the "main" HTML documents, and not every HTML file in this repo because that's a bit tedious. And these are ("advanced") styles to progressively enhance the map viewer, nothing essential.

How/why to pre-style to avoid Layout Shift is to be documented, per Maps4HTML/web-map-doc#26.

Comment thread index-map-area.html
@Malvoz

Malvoz commented Jul 18, 2021

Copy link
Copy Markdown
Member Author

Firefox does not support contain-intrinsic-size btw, which is fine. Again, this is to progressively enhance the map element(s).

@prushforth

Copy link
Copy Markdown
Member

Thank you.

@prushforth

Copy link
Copy Markdown
Member

I'll have a look at the documentation issue. Good idea.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Layout Shift due to no intrinsic size before elements are upgraded

2 participants