overflow-x:hidden not working on iPhone

Question

I'm trying to create a site that feels like a native app on iPhone/Android devices. I've managed to set it up so html and body do not scroll and I have a single content `

` which is the scrollable part. However, when setting ``` overflow-x:hidden ``` to allow only vertical scrolling I still get a horizontal scrolling behavior on iPhone (Chrome and Safari). You can see the scrollbar belongs to the .content element. Setting ``` overflow:hidden ``` works as expected and disables all scrolling. To me it looks like a bug on Chrome. The code: ```

Accepted Answer

Is there a reason that you are using a separate element to scroll and not letting the html element do it?

I have found that phones can be quite temperamental when not using the html element as the scroll, in fact some older android platforms will refuse to scroll at all if it isn't on the html element (Though I realise you specified just iOS in your question).

in regard to your actual question I would think it is because of the conflicting overflows on the same element.

```
overflow-y: auto;
overflow-x: hidden;
```

You would probably want to have one element that does the overflow-x and then put that inside of another element that handles the scrolling.

aka: give your `.content` element a `max-width: 100%;` and pull out the duplicate `.scroll` element

overflow-x:hidden not working on iPhone

Solution

Problem