Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Layout Shift due to no intrinsic size before elements are upgraded #376

Closed
Malvoz opened this issue Mar 30, 2021 · 0 comments · Fixed by #487
Closed

Layout Shift due to no intrinsic size before elements are upgraded #376

Malvoz opened this issue Mar 30, 2021 · 0 comments · Fixed by #487

Comments

@Malvoz
Copy link
Member

Malvoz commented Mar 30, 2021

layout-shift.mp4

(This Layout Shift is more notable when the map is larger, and on slower connections.)

We should give the element a (default) intrinsic size (300x150) before it is upgraded (:not(:defined)). These styles should only apply when Custom Elements is supported and JavaScript enabled such that we don't impose the styles on the map element in the graceful degradation/noscript scenario, in which case it may act as a container for any potential fallback content. And we also want to avoid overriding any author-provided CSS width and height declarations - shiny new contain-intrinsic-size to the rescue?

Who said styling custom elements is easy? 😋

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

Successfully merging a pull request may close this issue.

1 participant