HTML5 native scrolling on iPhone iOS5

Posted on: July 11, 2012Author: Rob

Fixing the overlay scroll: first try

So our overlay content doesn’t scroll as it should. Let’s fix that. The approach we will take is to position both our main and overlay divs “absolute”, make their width and height fill the screen and overflow the content within the div:

styles.css

#main {
  z-index: 1;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}

#overlay {
  z-index: 2;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: #666;
  color: #FFF;
  overflow-y: scroll;
}

Refresh the page and behold, scrolling works!

First try scrolling works

However, this is not entirely the way we really want it. The scrolling feels a bit clumsy, not like native iPhone scrolling at all. No bouncy bounces at the edges and certainly no fancy swooping effect when you release your finger mid-swipe. Fortunately, there’s a fix for that.

Fixing the overlay scroll: second try

With the release of iOS5, Apple introduced a new CSS property targeting iOS devices only: -webkit-overflow-scrolling. Add this property to any scrolling div and, as if by magic, the scrolling has turned into a native experience. How sweet is that!? Let’s add it to our overlay:

styles.css

#overlay {
  z-index: 2;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: #666;
  color: #FFF;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

Scroll the overlay and all should feel entirely native. But wait, we still have a problem; during scrolling random parts of our content seem to be missing:

Second try: native scrolling missing content

Unfortunately, we’ve hit a safari bug with our new property here. The problem is, our .cell elements have position relative. This messes up rendering when we set the -webkit-overflow-scrolling property. I believe this could have something to do with the GPU taking over rendering for a while to create the smooth scrolling effect and our elements being 2D planes. This is pure speculation, however, since I’m not an iOS developer by a long shot.

Fixing the overlay scroll: final fix

We can fix our rendering problem, though, and quite easily at that. We fix it by adding a -webkit-transform rule to our cells. In this case, I added translateZ(0). Adding this rule doesn’t change anything visually (and nor should it). However, it does seem to change the way Safari handles rendering the cells and suddenly have full on native scrolling with all our elements showing up the way they should.

.cell {
  position: relative;
  width: 150px;
  border: 1px solid #a90329;
  padding: 10px;
  margin: 10px;
  -webkit-transform: translateZ(0);
}

Well that was easy! Your scrolling overlay should look something like this now:

Native scrolling fixed

All that’s left to do now, is finish up our styling and position the overlay the way we intended from the beginning.

Pages: 1 2 3

  • tom

    Thanks a lot Rob! After trying several attempts with javascript, this was the best solution for scrolling an overlay fixeds-size div on IOS.

    • http://www.two-legs.com/ Rob Been

      You are very welcome! Best of luck with your mobile solution :)

  • tom

    Rob, what iOS version have you tested this CSS fix? It works for me using iOS5, but my client states it doesn’t work on his iPhone version.

    • http://www.two-legs.com/ Rob Been

      Hi Tom, when I created this solution, IOS5 was the latest version. As such, I only tested this on IOS5.

      I believe older versions don’t have any native support for -webkit-overflow-scrolling: touch; so they should have the original scrolling behavior. IOS6 should just work I guess.

  • Naeem Akhtar

    what about the input fields?