March 14

Overlay scrolling issues on iPhone iPad

scrolling-steve-jobs

Fixed position prevents iOS devices from scrolling the overlay div.

You are probably here because you were coding a website with overlaying divs and you discovered there’s a scrolling problem in iOS.

This happens in the css position property of fixed-size or fixed position div.  At first you will try the 2-finger swipe on your device and notice nothing happening.  Then you try to re-size the screen with the pinch gesture and scroll again. Am I right?  

I looked it up and this has been a known issue in Safari caused by Apple not wanting duplicate scroll bars to complicate the simplified user-interface. I don’t remember the credit reference for this, but will post it when I find it.

First consider using HTML5 and the meta tags for mobile.


So after spending hours trying different javascript plug-ins, none of them really worked in my specific project which is a fixed size div in a relative position.  Then a fixed size matching the same div sliding on top with additional content.

Thanks to Rob Been by discovering and posting the method on his blog. Here it is with some brief explanation:

Limiting the range of the scaling in the above meta tag will slightly improve performance.   Using 3 divs you have the #container DIV with a z-index:0 and a fixed size.  Then #overlay will be on top with the same dimensions in the absolute position and a higher z-index: 1 and the 3rd DIV with the #subcontent.

The lines containing -webkit- are the key to make the scrolling work in Safari.  In the #overlay DIV you need overflow-y: scroll and –webkit-overflow-scrolling: touch to force the scrolling.  In #subcontent you need –webkit-transform: tranzlateZ(0); to move the actual html content up and down, other wise the DIV will scroll but the overflowing content will NOT show.  What a relief to have 3 lines of code that makes it possible to scroll instead of using javascript 🙂


Tags: , , ,

Posted March 14, 2013 by Tom in category "Code", "Design", "Mobile

10 COMMENTS :

  1. By Guaca Mole on

    This works great with iOs 6, but not so much with the new iOs 7 that was just released (at least from what I have tried so far). Any one have any tips for accomplishing this in iOs 7?

    1. By Tom (Post author) on

      I’m glad to hear that it works since I don’t have iOS 7 yet. Let me know if it requires additional code and I’ll update this article.

  2. By Robert M on

    Great article. Moving some web pages to mobile has been a challenge with Safari. You just made it a lot easier. Thanks.

  3. By Sepi on

    Many thanks for sending this post. I really don’t know without those people (like you) who share valuable information of their experiences, it would be as possible for others Devs to grow that fast. Much appreciated man!

    Just a question for you, do these DIVs have to be put together in a nested model or a flat structure t the same level?

    Many Thanks
    Sepi

  4. By Andrew on

    This is part of what I currently have in my section of one of my web sites on a Test Page (TipTopShirts.com/DIV.html).

    In the CSS File, I have the CSS Script that is Posted on this web site.

    In the section, I have:

    2015…

    I Tested this on a iPad & a iPhone, and Both Aren’t Scrolling. On Androids, it Freezes sometimes, but it Does Scroll. How can I Fix the Fix my Issues?

    Also, How can I get the 2015… Part to Always be at the Very Bottom of Any Device. I Tested 90% & 10% Div Tags. But that Changes Per Device.

    Spreadshirt Launched Responsive, and for Over 2 Weeks, I’ve Been On This. I’m Ready for this to be Solved Already! LOL :–)

Leave a Reply