Font flicker and sticky elements on iOS

Issues
1

Hey gents… We’re having 2 quick UI Issues:

  1. CSS Preload: The CSS files are being preloaded in the head tag: <link rel="preload" href="/_next/static/css/c79b5e526f754e621379.css" as="style">, however, we’re still seeing flicker of fonts as the pages are loaded. Please see the 2 images attached.
  2. Sticky Elements: on iOS devices, Sticky elements are flickering on iOS devices only. See attached video.
    Thanks guys! :slightly_smiling_face:

@ideological_sloth

IMG_5237.PNG
IMG_5237.PNG1170×2532 140 KB

IMG_5238.PNG
IMG_5238.PNG1170×2532 144 KB

2

For fonts, since you’re using Next, and you already know what fonts you’re using, you can try including the fonts directly yourself in a <Head/>, instead of relying on Plasmic to do it. That will trigger Next’s font optimization, and it should try to preload and embed it even more:

https://nextjs.org/docs/basic-features/font-optimization

3

For sticky elements – are you just using position:sticky from within the studio?

4

We’ll implement your fonts suggestion, thank you.

Yes, position:sticky is within the studio. It’s working without issues when it’s set at the instantiation, however, when it’s set on a child element of a component, it causes this.