[Support request] Content post moving left and right on Apple (safari and chrome)

[Francesco]

Hi, i have a problem with the post pages of my blog messagingapplab.com (not on page made with Elementor)
Only from iPhone the content moves left and right. For example https://messagingapplab.com/appear-offline-facebook-messenger/.

How can I fix it?

best regards,
Frankie

[David]

Hi there,

i can’t see the issue when i tested the site. It generally happens if an element is too wide for the screen, which may be one of the adverts.

as a catch all fix you can add this CSS to your site:

html, body {
    overflow-x: hidden;
}

[Francesco]

Hi David thanks for your support. I created a video to show you the problem: https://drive.google.com/file/d/1AItfeDiLv1UaJ0niCy6-WAhz_n-Cg6N1/view?usp=sharing

Unfortunately the code html, body {
overflow-x: hidden;
}
doesn’t work.

[David]

I can’t replicate the issue on my mobile in either browser and after several times clearing caches.
The only time i see the problem is in the browser developers tools to view a responsive version of the desktop page:

https://www.screencast.com/t/kBhPBwmcIORF

When loaded over desktop the adverts are too large, but the CSS i provided fixes that ( you may need to clear browser caches to see it work ).

So it may be a server page caching issue, where scripts/styles for desktop are being loaded on mobile. Or it could the scripts that are injecting the adverts. You can see on scrolling the body element flashes blue in the video, which is caused by JS updating its attributes.

I would begine with disabling any caching options, and if the issue persists check with the advert providers.

[Francesco]

Hi David and really thanks!

I deactivated WProoked and disable Google AdSense but the problem persist.

I also did everything you told with browser caches

[Francesco]

Can I give to you the credential and check if everything works properly with GeneratePress?

[Elvin]

Hi Francesco,

I just checked your site and I don’t see the issue anymore.

I’ve checked it on 2 mobile phones (Redmi Note 9s and POCO NFC X3), and the site looked fine w/o horizontal overflows.

Can you recheck the site on a mobile device w/ a cleared browser cache?

[Francesco]

Hi Elvin, the issue is only on iPhone and iPad (both Safari and Chrome)

[David]

I still can’t replicate the issue.
I tested on an iPhone 7+ iOS 14.x and an iPhone 13 iOS 15.
And neither of had any horizontal scroll.

Are you logged in to the site when the issue occurs ?

[Francesco]

Hi David, no! I tested also in different iPhone here in Italy and replicate the issue.

[David]

I tested several pages and cannot replicate the issue, heres part of the screen recording i made:

https://www.screencast.com/t/1AcS6ovfT

The only time i see the overflow, as i mentioned above, is if i:

1. Load the page on desktop – so desktop adverts are loaded
2. Use the Browser developer tools in Chrome to see the mobile view.
3. Disable the overflow hidden CSS i provided.

The overflow occurs then because of the desktop advert is too wide for the device. But the CSS i provided fixes that.
As i cannot replicate the issue on a mobile device in Europe then i can only assume that the issue is local. First test is to check using a different Network, as there may be some bad cached files being served from the ISP or Router.

But please note – this is not a theme related issue. Theres nothing in the theme that would cause this.

[Francesco]

Thanks David for your support!

[David]

Glad to be of help

[Author]

Posts