Overflow-x value ignored in mobile safari

Question

We set the overflow-x values to hidden on both the body and scrollable elements, but mobile Safari ignores these values. On the desktop, the overflow values work fine.

Relevant code:

body { overflow-x:hidden; width:320px; height:100%; min-height:100%; margin:0; background:-webkit-linear-gradient(top,#e8e4dc,#f2f0eb); }

.page_list, .content { max-height:370px; box-sizing:border-box; padding:0; overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch }

#catalog_page { border-left:1px solid #CCC; z-index:28; position:absolute; top:0; width:200px; height:460px; background:white; -webkit-transition:-webkit-transform 0.1s ease-in;; -webkit-transform:translate3d(0,0,0); display:none; }

catalog_page is what sits outside the viewport, sliding into view only after someone does a gesture.

To reproduce:

1) Visit www.tekiki.com on your iPhone (not iPad). Scroll to the right, and you'll see how catalog_page extends the site's width, even though we fixed the body width.

Answer 1

It's 2020 but I am still trying to find an answer for this.

After many experiments, I found that this answer was actually the only working one.

However, it does create an odd black bar across the whole page in all browsers. Also, you should not use units for zero values.

Therefore, my final solution is this: (any transform function should do the trick, just remember to set zero values.)

html, body {
    ... (font, background, stuff)

    overflow-x: hidden;
    /* Safari compatibility */
    height: 100%;
    width: 100%;
    transform: translate3d(0,0,0);
}

Be aware, this solution may influence on your navigation. "position: fixed;" will not work on children because of "transform" property set something other than "none" https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed

Answer 2

I had the following code to disable double-tap to zoom:

* {
  touch-action: none;
}

This broke overflow scrolling though. Here’s how I fixed it:

pre {
  overflow-x: scroll;
  touch-action: pan-x;
}