How to fix unintended horizontal slop of a website appering on IOS only?

Website:

https://efloristy.com/

I have this Viewport meta tag which I can not edit (I don't have access to HTML):

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

The Problem

On some iPhones (tried iPhone X and 7 both on IOS 14), the whole website sometimes wobbles (shift) to the right or left (horizontally), and goes back to its original place (center) when I remove my finger. It happens accidentally while scrolling up and down.

I have also tried it on 6 plus and 6s plus (IOS 14 & IOS 12 respectively), and it looked fine on both without any problem. I tried on multiple Android devices as well and all was fine too. It's worth mentioning that It appears on Safari as well as Chrome browsers.

The website is built using a Shopify-like platform called Salla, and I was asked to add some modifications using CSS only (HTML & JS isn't acceptable or editable). When I remove my CSS code the problem disappears, so I am pretty much sure my modifications are the reason for the problem but it's about 700 lines of CSS, so I am trying to avoid removing rule by rule and testing on mobile.

screenshot

What I tried

  • I am aware of this question and this one. On Sitepoint community I saw this too. Unfortunately, none worked for me.

  • I thought it might be an overflow problem so I checked this one on CSS-Tricks, and nothing really helped including running this script to see if there are any element with a width bigger than the docWidth:

var docWidth = document.documentElement.offsetWidth;

[].forEach.call(
  document.querySelectorAll('*'),
  function(el) {
    if (el.offsetWidth > docWidth) {
      console.log(el);
    }
  }
);
  • I tried body, html{overflow-x: hidden;}, body {max-width: 100vw; /*and 100% and auto*/} and body {width: 100vw; /*and 100%*/}. All didn't work obviously.

  • I tried reducing the width of the top bar (as shown in the screenshot) as it's the only one with position: fixed;

  • I tried outlining everything (as shown in the screenshot) to see if anything overflowing, and it seems nothing is overflowing.

  • I also tried to disable zooming defaults on mobile phones (I know it's not acceptable for accessibility reasons), so tried body {touch-action: pan-x pan-y;}. It stoped the iPhone from zooming out (which they were able to do) but the problem remianed.



Read more here: https://stackoverflow.com/questions/67011687/how-to-fix-unintended-horizontal-slop-of-a-website-appering-on-ios-only

Content Attribution

This content was originally published by Amer Alahmar at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: