[Resolved] Header & top bar background semi transparent on scroll using sticky command

[Elvin]

For privacy, can you please remove the above link and anything above that can be visualized externally.

All links redacted.

Thank you for your help it’s greatly appreciated.

No problem. 🙂

[Dominique]

Hi,

After troubleshooting the issue with cumulative layout shift since last night.

I removed the image from featured image and put it at the top. Reduced a bit.

Still, I was having a larger layout shift of 0.6 for class entry-content text. I modified inside my @font-face declaration font-display: block; for font-display: swap; Magically cumulative layout shift dropped to zero everywhere.

When I saw the “text” figured it was the heading font and by chance tried the modification. It used to be at “swap” a few months back & I modified it to “block” after reading an article from Google!

Hope this helps someone else.

Can you please remove the PageSpeed Insights link two or three posts above.

Thanks

[Dominique]

Hi,

Didn’t solve the issue. Only temporarily. I guess it was a cache thing.

It’s reported as <div class="entry-content" itemprop="text"> with a cumulative layout shift of 0,548 on desktop.

Any ideas?

[Elvin]

It’s reported as

with a cumulative layout shift of 0,548 on desktop.

This is a generic flag. It means one of it’s contents is causing the issue.

Didn’t solve the issue. Only temporarily. I guess it was a cache thing.

That’s actually one of the points of using caching and optimization plugins. To reduce the amount of time for things to load which in turn, solves some of the CLS issues.

Still, I was having a larger layout shift of 0.6 for class entry-content text. I modified inside my @font-face declaration font-display: block; for font-display: swap; Magically cumulative layout shift dropped to zero everywhere.

Ah that’s right. font-display: swap; solves FOUT or “Flash of Unstyled Text” which can also be a cause of CLS. https://css-tricks.com/fout-foit-foft/

That’s most likely what happens to your texts inside <div class="entry-content" itemprop="text">.

[Dominique]

Hi,

I’m opening another thread as the title doesn’t reflect the subject anymore.

[Elvin]

I’m opening another thread as the title doesn’t reflect the subject anymore.

Yes indeed. Thank you.

If the original concern of the topic is resolved you can mark it as such.
https://docs.generatepress.com/article/resolving-topics/

[Author]

Posts