Overflow-x value ignored in mobile safari

Asked 20/7, 2013 at 22:9 Answered 7/2, 2022 at 22:50

Solved iphone ios css html mobile-safari

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.

Kinsman answered 20/7, 2013 at 22:9 Comment(0)

Add html { overflow: hidden; } to your CSS and it should fix it.

Safari answered 20/7, 2013 at 22:40 Comment(4)

awesome, thanks! we tried overflow-x on the HTML element before, and it didn't work? why does this fix this? btw, could you also email me at info at panabee.com? would like to ask a quick question. thanks! – Kinsman 20/7, 2013 at 23:5

I would also add "overflow-y: auto" so you can scroll up and down. – Venomous 16/1, 2014 at 3:2

Wow, thanks! All of the hacks for this problem are terrible. This worked perfectly (iOS 10 here). Also, I'm only using overflow-x and it works just as well. – Proficient 15/1, 2017 at 0:24

this work but in ios the soft scroll is disabled , any solution? – Mattiematting 23/8, 2018 at 16:25

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

Infective answered 25/4, 2020 at 0:14 Comment(3)

Thank you for sharing this! Adding the transform there fixed the issue I had with Safari ignoring my overflow-x: hidden. – Imray 15/10, 2021 at 23:38

Also be aware that setting overflow-x: hidden on the html element will break any use of position: sticky on elements within. Unfortunately Safari has turned into the new IE :( – Wawro 7/12, 2022 at 7:35

It's 2024 and even though new Safari versions support this, we have to include support for older versions that don't. I was looking for this fix for ages! – Nahshun 22/7 at 22:2

Tested with Mobile Safari on iOS 7.1/8.2 Following code didn't work for me neither.

html { overflow: hidden; }

I believe it's a bug/feature of Mobile Safari, other browsers, including Safari on OSX works well. But the overflow:hidden works on iPhone/iPad if you also set position:fixed to HTML element. Like this:

html { overflow: hidden; position: fixed; }

Forman answered 28/3, 2015 at 16:57 Comment(0)

Add html { overflow: hidden; } to your CSS and it should fix it.

This solution didn’t work for me.

Instead, i create a wrapper div inside the body and apply the overflow-x:hidden to the wrapper :

CSS

#wrapper { 
    overflow-x: hidden;
}

html

<html>
...
<body>
<div id="wrapper">
...
</div>
</body>
</html>

Velocipede answered 10/12, 2014 at 22:20 Comment(6)

Why the down vote ? This solution works for me and not the one which is accepted. – Maisel 27/12, 2014 at 16:15

Doesn't work for me. Content just overflows and I get a huge scroll. It's honestly only applicable in very specific scenarios. – Hoskins 17/3, 2015 at 16:0

@Hugo Could you show an example ? Like i said, it worked for me and not the accepted answer. – Maisel 17/3, 2015 at 16:8

I had a div with width:3000px; position: absolute; bottom: 0; Dunno if that enough to reproduce the non-applicability, or if other elements in my DOM made a difference. – Hoskins 17/3, 2015 at 20:13

@Hugo Could you make a simple fiddle ? I would like to try. – Maisel 18/3, 2015 at 9:24

Sorry, I don't have that same code anymore, I went around the issue with some large rewrites. I would have created one if I still had it. – Hoskins 18/3, 2015 at 16:5

in my case, the following did solve the problem

body, html {
  overflow-x: hidden;
}

Affection answered 5/8, 2016 at 9:38 Comment(1)

This does not answer the question. Obviously, this did not work for the safari version 2 years ago. – Koblenz 5/8, 2016 at 10:0

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;
}

Bye answered 3/4, 2020 at 23:22 Comment(0)

I actually gave up on css overflow-x in IOS safari. I used script instead

$(window).scroll(function ()
{
    if ($(document).scrollLeft() != 0)
    {
        $(document).scrollLeft(0);
    }
});

Saba answered 16/5, 2020 at 14:51 Comment(0)

It's 2022. Mobile safari can still be quirky. But it seems for me the way to get overflow-x working on the body is to do the following:

html,
body {
  height: 100%;
  overflow-x: hidden;
  transform: translate3d(0, 0, 0);
}

I wish I understood the transform, but it seems necessary. The other way was to set the body to position of relative, but this seems safer.

Another way thats definitely safe, and future proof, is to place everything in body directly into a div and give that div an overflow of hidden and make sure it has a min-height of 100vh. Like so:

<body>
  <div class="page">
    everything...
  </div>
</body>

Then in CSS:

.page {
    min-height: 100vh;
    overflow: hidden;
    position: relative;
}

Noisome answered 7/2, 2022 at 22:50 Comment(0)

-1

In order to solve the issue on older devices (iphone 3) as well I had to mix the solutions, because they didn't work singularly.

I ended up adding a wrapper div to the html body:

<html>
  <body>
    <div id="wrapper">....</div>
  </body>
</html>

and styling it with:

#wrapper { 
  overflow: hidden 
}

and it finally worked.

Poston answered 16/10, 2015 at 9:7 Comment(0)

-1

If html, body overflow-x: hidden; is not working for you try looking for text-indent. The default settings of flexslider for example have some elements set to text-indent -9999px. I found this was overriding html overflow rules.

Strother answered 7/12, 2017 at 0:34 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags