CODEWITHSUNDEEP
htmlioscssiphone
luqita
luqita

Reputation: 4077

overflow-x: auto on iPhone is not scrolling

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?

Upvotes: 6

Views: 8409

Answers (4)

Adam Hamdi
Adam Hamdi

Reputation: 31

    .class-name{
     overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
}

Upvotes: 1

Adam Howard
Adam Howard

Reputation: 400

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!

Upvotes: 2

Florian
Florian

Reputation: 855

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?

Upvotes: 3

www139
www139

Reputation: 5227

You may want to make the form 'flexible' instead. Try using a percentage width in your CSS. For example width:10%;

Upvotes: 0

Related Questions