[Resolved] Element Changes Size on Mobile Device for Specific Page

[Adrien]

Hello support,

I’m facing a weird issue and after hours of research, I can’t understand where it comes from.

On this specific page, on mobile devices : https://www.ispeakspokespoken.com/cours-anglais/
The first element (the red box) changes size as soon as you scroll the page.

Thanks for your help,
Adrien

[Leo]

Hi there,

Can you first disable all plugins except GP Premium and GenerateBlocks to test?

Let me know 🙂

[Adrien]

Hey,

Thanks for the fast answer.

First : actually the issue also happens on computer.

But it looks a bit different than on mobile devices.

– On mobile devices : you can clearly see the first element (red box) resizing (from small to big).
– On computer : there’s just a layout shift, like a blank space between the menu and the content of the page.

Again, the weird thing is : the issue only happens on this specific page.

I’ve created a staging version of the website, so that you can check it and test whatever you want.
You also have access to the production website where you can see the issue live.

Thanks a lot,
Adrien

[David]

Hi there,

can you try adding this CSS:

@media (max-width: 1150px) {
    #sticky-placeholder {
        height: 115px !important;
    }
}

Let me know if that fixes the issue ?

[Adrien]

Hello David,

Thanks for your answer.

I’ve tried adding the CSS, but it doesn’t change anything.

Another point: the issue only happens on the page when you’re logged out. If you’re logged in there’s no layout shift. Neither on computer nor on mobile.

[David]

Is it possible to get a screen recording of the issue? I just wanna make sure we are seeing the same thing.

[Adrien]

Sure thing,

You’ll find the screen recording here: https://drive.google.com/file/d/1neoNtjVQVxSN8AYRC-l9JJQ1hPMRfpsp/view?usp=sharing

[David]

Are you using WP Rocket and PerfMatters for the CSS optimization on the site ?

[Adrien]

Yes, I am.

Actually, we use 3 tools for performance:

– Perfmatters
– WP Rocket
– Cloudflare APO

I do have these kind of issues quite often and I found out that clearing used CSS on Permetters does the trick.

In this situation, I’ve cleared used CSS, I’ve cleared all the caches (WP Rocket, Cloudflare), but the issue remains.

I’ve also tried and recreated the first section of the page from scratch, but nothing.

(I’ve provided you with all the information you need to login on the website + staging in previous messages, if you need to)

[David]

So i disabled Cloudflare, Perfmatters and WP Rocket on the staging site.
And as expected, the styles now load correctly and there is no size change or layout shift on that page.

I then enabled just Cloudflare and Perfmatters and the issue returned.
So i then disabled the Unused CSS option in Perfmatters and the problem went away again.

You need to speak with Perfmatters as it looks to be there CSS optimization that is causing the problem.

[Adrien]

Thank you very much for your time David. I’m going to contact Perfmatters then.

Awesome support, as always!

Enjoy the end of your week.
Adrien

[David]

You’re welcome

[Author]

Posts