HTML5 native scrolling on iPhone iOS5

Posted on: July 11, 2012Author: Rob

Lately I have been involved in creating an exciting new mobile application for MyTistics. We are working on a functional iPhone proof of concept using HTML5/CSS and JavaScript. During development we noticed some weird scrolling issues on our iPhone devices (running iOS5). I jumped in and found some interesting challenges along the way.

This post will show you some scrolling issues with mobile Safari and how to fix them using CSS only. Our aim is to create a main content div which will scroll vertically, two menu buttons which should remain fixed at the top of the page and an overlay div with internal overflowing content scrolling vertically as well. The result should look something like this:

iPhone HTML5 overlay example

TL;DR

We fix native scrolling HTML5 elements on iPhone using -webkit-overflow-scrolling: touch; and -webkit-transform: translateZ(0);. Download the result from my repository.

First steps

Let’s start by creating our project skeleton. For this demo I used the excellent html5 mobile boilerplate as a starting point and started working from there. First up, the html:

I left most of the boilerplate as is, so I’ll only show the #container part here. The texts have been generated using Cupcake Ipsum.

index.html

<div id="container">
    <button class="left"></button>
    <button class="right"></button>
    <div id="main" role="main">
        <div class="cell">
            Brownie marzipan pudding danish apple pie lemon drops jujubes. Oat cake cupcake marshmallow sweet. Chocolate chocolate cake marzipan gummies biscuit cheesecake. Sesame snaps powder caramels halvah. Lemon drops chocolate pastry chupa chups carrot cake marshmallow danish cake. Tiramisu cake candy canes oat cake. Jelly apple pie biscuit sweet chupa chups applicake toffee candy canes jelly beans. Croissant donut chocolate cake gummi bears cookie. Liquorice jelly-o toffee tiramisu fruitcake. Gingerbread faworki powder marshmallow oat cake. Apple pie marzipan faworki croissant. Marzipan chupa chups candy soufflé wafer faworki biscuit bear claw dragée. Sesame snaps marshmallow tootsie roll wypas halvah tiramisu apple pie dessert.
        </div>
        <div class="cell">
            Dessert gummies wafer lemon drops candy canes cheesecake soufflé tootsie roll powder. Pastry chocolate chocolate bar pudding tootsie roll brownie jelly cheesecake. Sesame snaps candy tart icing macaroon marshmallow. Jelly beans croissant oat cake toffee chocolate cake macaroon. Ice cream cheesecake bear claw lollipop tootsie roll powder marzipan fruitcake. Wafer gummies chocolate cake pudding liquorice tiramisu. Candy canes wafer topping candy icing sweet gingerbread pudding lollipop. Tart donut gummies sesame snaps cheesecake bonbon. Powder sweet roll topping jelly beans. Wafer pudding jelly jelly jelly beans ice cream chocolate bar pie. Gingerbread marshmallow jelly-o liquorice tart macaroon sesame snaps powder. Pie faworki sweet roll tart wafer caramels tiramisu.
        </div>
        <div class="cell">
            Chupa chups brownie topping liquorice gingerbread. Bear claw dessert ice cream jujubes pastry chocolate toffee carrot cake. Sweet sweet candy canes topping liquorice tart bear claw faworki sweet roll. Liquorice oat cake sweet halvah sugar plum. Caramels lollipop cheesecake bonbon danish lemon drops. Pie applicake cotton candy tootsie roll danish jelly-o danish jujubes dragée. Tart cheesecake lemon drops macaroon faworki. Dessert wypas cupcake. Marshmallow caramels gingerbread. Candy canes cake sweet roll chocolate cake tart brownie. Cheesecake jelly beans brownie chocolate cake cotton candy bear claw. Applicake cake carrot cake lollipop tiramisu wafer jelly-o cupcake. Ice cream lemon drops tiramisu chupa chups sugar plum lemon drops topping. Croissant muffin chocolate gummi bears carrot cake dragée powder.
        </div>
        <div class="cell">
            Faworki pudding dragée liquorice chocolate cake soufflé. Wafer cupcake chupa chups gummi bears powder chocolate lemon drops. Chocolate bar pastry sweet roll gummi bears chocolate cake pie gingerbread. Powder soufflé gingerbread wypas applicake sugar plum bear claw. Sweet lemon drops croissant marshmallow muffin gummies. Wafer ice cream sweet roll caramels jujubes. Apple pie liquorice topping sugar plum sweet faworki. Liquorice lollipop pudding jelly-o pastry dessert chocolate bar. Candy chocolate tootsie roll wypas. Bonbon soufflé bonbon candy canes soufflé icing chocolate cake. Sugar plum muffin cotton candy. Liquorice cupcake caramels icing dessert. Candy cookie dessert gummies wypas jelly beans carrot cake carrot cake chupa chups.
        </div>
        <div class="cell">
            Jelly-o brownie cotton candy sesame snaps cheesecake sweet roll danish candy canes chupa chups. Bonbon carrot cake chocolate cake soufflé oat cake jelly soufflé muffin. Bear claw icing oat cake toffee danish jelly beans brownie dragée. Dragée macaroon jelly powder sweet roll. Chupa chups cupcake icing. Chocolate soufflé candy canes sugar plum topping. Chocolate tootsie roll toffee wafer. Bonbon chocolate chupa chups chupa chups jujubes lemon drops. Macaroon lemon drops jujubes soufflé jelly-o chocolate bar cheesecake cheesecake. Wafer wypas chocolate cake marshmallow lemon drops. Cookie danish chupa chups jelly-o fruitcake bear claw. Dragée candy canes jujubes sugar plum carrot cake. Dragée topping pie brownie applicake apple pie. Wypas macaroon jelly chocolate cake dragée faworki.
        </div>
    </div>
    <div id="overlay">
         <div class="cell">
            Brownie marzipan pudding danish apple pie lemon drops jujubes. Oat cake cupcake marshmallow sweet. Chocolate chocolate cake marzipan gummies biscuit cheesecake. Sesame snaps powder caramels halvah. Lemon drops chocolate pastry chupa chups carrot cake marshmallow danish cake. Tiramisu cake candy canes oat cake. Jelly apple pie biscuit sweet chupa chups applicake toffee candy canes jelly beans. Croissant donut chocolate cake gummi bears cookie. Liquorice jelly-o toffee tiramisu fruitcake. Gingerbread faworki powder marshmallow oat cake. Apple pie marzipan faworki croissant. Marzipan chupa chups candy soufflé wafer faworki biscuit bear claw dragée. Sesame snaps marshmallow tootsie roll wypas halvah tiramisu apple pie dessert.
        </div>
        <div class="cell">
            Dessert gummies wafer lemon drops candy canes cheesecake soufflé tootsie roll powder. Pastry chocolate chocolate bar pudding tootsie roll brownie jelly cheesecake. Sesame snaps candy tart icing macaroon marshmallow. Jelly beans croissant oat cake toffee chocolate cake macaroon. Ice cream cheesecake bear claw lollipop tootsie roll powder marzipan fruitcake. Wafer gummies chocolate cake pudding liquorice tiramisu. Candy canes wafer topping candy icing sweet gingerbread pudding lollipop. Tart donut gummies sesame snaps cheesecake bonbon. Powder sweet roll topping jelly beans. Wafer pudding jelly jelly jelly beans ice cream chocolate bar pie. Gingerbread marshmallow jelly-o liquorice tart macaroon sesame snaps powder. Pie faworki sweet roll tart wafer caramels tiramisu.
        </div>
        <div class="cell">
            Chupa chups brownie topping liquorice gingerbread. Bear claw dessert ice cream jujubes pastry chocolate toffee carrot cake. Sweet sweet candy canes topping liquorice tart bear claw faworki sweet roll. Liquorice oat cake sweet halvah sugar plum. Caramels lollipop cheesecake bonbon danish lemon drops. Pie applicake cotton candy tootsie roll danish jelly-o danish jujubes dragée. Tart cheesecake lemon drops macaroon faworki. Dessert wypas cupcake. Marshmallow caramels gingerbread. Candy canes cake sweet roll chocolate cake tart brownie. Cheesecake jelly beans brownie chocolate cake cotton candy bear claw. Applicake cake carrot cake lollipop tiramisu wafer jelly-o cupcake. Ice cream lemon drops tiramisu chupa chups sugar plum lemon drops topping. Croissant muffin chocolate gummi bears carrot cake dragée powder.
        </div>
        <div class="cell">
            Faworki pudding dragée liquorice chocolate cake soufflé. Wafer cupcake chupa chups gummi bears powder chocolate lemon drops. Chocolate bar pastry sweet roll gummi bears chocolate cake pie gingerbread. Powder soufflé gingerbread wypas applicake sugar plum bear claw. Sweet lemon drops croissant marshmallow muffin gummies. Wafer ice cream sweet roll caramels jujubes. Apple pie liquorice topping sugar plum sweet faworki. Liquorice lollipop pudding jelly-o pastry dessert chocolate bar. Candy chocolate tootsie roll wypas. Bonbon soufflé bonbon candy canes soufflé icing chocolate cake. Sugar plum muffin cotton candy. Liquorice cupcake caramels icing dessert. Candy cookie dessert gummies wypas jelly beans carrot cake carrot cake chupa chups.
        </div>
        <div class="cell">
            Jelly-o brownie cotton candy sesame snaps cheesecake sweet roll danish candy canes chupa chups. Bonbon carrot cake chocolate cake soufflé oat cake jelly soufflé muffin. Bear claw icing oat cake toffee danish jelly beans brownie dragée. Dragée macaroon jelly powder sweet roll. Chupa chups cupcake icing. Chocolate soufflé candy canes sugar plum topping. Chocolate tootsie roll toffee wafer. Bonbon chocolate chupa chups chupa chups jujubes lemon drops. Macaroon lemon drops jujubes soufflé jelly-o chocolate bar cheesecake cheesecake. Wafer wypas chocolate cake marshmallow lemon drops. Cookie danish chupa chups jelly-o fruitcake bear claw. Dragée candy canes jujubes sugar plum carrot cake. Dragée topping pie brownie applicake apple pie. Wypas macaroon jelly chocolate cake dragée faworki.
        </div>
    </div>
    <footer>

    </footer>
  </div> <!--! end of #container -->

As you can see, we have a #main div filled with cells, a #layout div filled with similar cells and two top buttons. Let’s fix the styling so the overlay is on top and fills our screen (for now). We do this by adding the following section to the styles:

styles.css

/* =============================================================================
   Demo Styles
   These are the styles used for this demo
   ========================================================================== */
button {
  background: #a90329; /* Old browsers */
  background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
  background: linear-gradient(to bottom, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
}

button.right {
  width: 100px;
  height: 50px;
  position: fixed;
  right: 20px;
  top: 5px; 
}

button.left {
  width: 100px;
  height: 50px;
  position: fixed;
  left: 20px;
  top: 5px; 
}

#main {
  z-index: 1;
}

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

.cell {
  border: 1px solid #a90329;
  padding: 10px;
  margin: 10px;
}

When you open this webpage in safari on an Iphone, you should see a grey background filled with red lined cells of content flowing out of the viewport. However, when you try to scroll the content down, you’ll see some weird behaviour during scrolling:

Overlay scrolling content underneath

The problem is that we are scrolling our main content, but the overlay content remains as is. Let’s fix that on the next page.

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?