Overflow-x: auto on iPhone does not scroll
I have an iframe inside a div that looks like this:
<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 mobiles. This works correctly on desktops and other phones like Android, but when using Safari on iOS, there is no scrolling or works randomly.
Any possible fixes for this? Is this an iOS bug?
source to share
I saw in your sources that you are using bootstrap, so why didn't you just adapt to being inside the screen without scrolling (horizontal scrolling on mobile is not very convenient for me).
If you really want to use scrolling, I recommend you use:
-webkit-overflow-scrolling: touch;
instead
-webkit-overflow-scrolling-x: touch;
Have you tried using !important
?
source to share
I just went to this site on my iPhone and the form scrolled easily on X-Axis using iOS 8.1. I also took you to your site using iOS 6.1.6 on a 4th generation iPod touch. In this older version of Safari, the web form could still load correctly and scroll easily on the X axis.
If you are having problems with your web page, it might be a bug specific to your version of iOS or Safari. But I didn't have any problems, the scrolling is smooth and works consistently. Hope this external test helped you. Good luck and greetings!
source to share