Archived topic
Visual Cumulative Layout Shift (CLS) issue
5 replies · Started by Dong on June 25, 2021
Gents,
I have this issue on my website's mobile page after switching from Floats to Flexbox.
Basically, when a page first loads, it comes with a frame. As I scroll, the frame would widen (as it's supposed to) and causes Cumulative Layout Shift (CLS). You can see more of what I mean in this recorded screen:
https://photos.app.goo.gl/3aQxCNz216Fesvh36
I'd like the frame to be at the maximum width as soon as the page load. How can I do that with Flexbox?
Thanks
-Dong.
Hi there,
i am not seeing the frame and the change in width when i scroll ?
The only CLS issue i am seeing is caused by the Font Swap that occurs after your fonts are loaded.
Hi David,
I moved the site back to Floats. The issue, as shown in the video, happens only it's in Flexbox.
-Dong.
Hi Dong,
If you switch to flexbox, and clear cache + disable cache plugin, does this still happen?
Let me know.
I can try that, Ying. I use WP-Rocket for caching. Do you have any particular settings I should use for Flexbox?
Let's try that first, and if it's the cache plugin causing the issue, it's better to reach out to the plugin's support. :)
