overflow-x: auto on iPhone is not scrolling

Question

I have an iframe inside a div, which looks like:

<div align="center" style="z-index:0; -webkit-transform: translate3d(0,0,0); overflow-x:auto; -webkit-overflow-scrolling-x: touch"> 
    <a href="c1" data="c1"></a>
    <script type="text/javascript" src="iframe-loader"></script>
</div> 

I want the entry form to be scrollable on the x-axis, so that it can be used in mobile phones. This is working correctly on desktop and other phones, such as Android, but when using Safari in iOS the scroll is not present or works randomly.

Any possible fixes for this? Is this an iOS bug?

Answer 1

I saw in your sources that you use bootstrap so why you don't just adapt the with to be all inside the screen without any scrolling (horizontal scrolling on cellphone is not really user-friendly for me).

If you really want to use scrolling, I recommend you to use:

-webkit-overflow-scrolling: touch;

instead of

-webkit-overflow-scrolling-x: touch;

Have you tried to use !important?

Answer 2

I just went to this website on my iPhone, and the form scrolled easily on the X-Axis using iOS 8.1. I also went to your site using iOS 6.1.6 on a 4th generation iPod touch. On this older version of Safari, the web form was still able to load properly and scroll easily on the X-axis.

If you are having issues with your webpage, it could be a bug specific to your version of iOS or Safari. But I have not had any issues, the scrolling is smooth and works consistently. Hopefully this outside test was of help to you. Good luck and cheers!