Hey team
I’ve noticed the s-switch + s-checkbox have a content layout shift when the page is loaded. The font-sizing shifts slightly.
In Chrome, visiting either of the help doc sites you can see it in action:
When the page initially loads there is a few ms then the font is adjusted.
Here’s a quick Loom video showing the page being reloaded a few times, and the font size shift:
I believe what you’re seeing there is a shift as the font we use gets loaded in. I took another recording and slowed it down a lot and it seems to match that behavior.
I’ll raise an issue internally to see if there’s a way we can optimize this better, though. Thanks!
Thank you!
Not sure if this helps
We are using the latest Polaris package 13.9.5
We also preload Inter via CSS:
https://cdn.shopify.com/static/fonts/inter/v4/styles.css
Preloading Inter is going to help the most for this, so that’s great.
Adding more context here…
The font-size-shift only occurs when the component includes both the label and the details attribute strings.
When it’s just the label, there is no detectable shift.
I still see the shift when it’s just label. It’s harder to tell, but it’s still there.
Hi @Anthony_Frehner ,
As you know the font being use (Inter) you can elegantly solve this issue by using font-metrics (Improved font fallbacks | Blog | Chrome for Developers) which is, by the way, something I’ve asked to be implementing in Liquid as well in the font drop. I can understand calculating the metrics for all the fonts offered in Shopify themes can be complex (but would be so beneficial) but in the case of Polaris, as you just have one font to handle, that’s a very easy solution 