How we fixed the -webkit-overflow-scrolling: touch; bug on iOS

When working with the overflow: scroll; attribute, the -webkit-overflow-scrolling: touch; attribute can be very useful on mobile sites. It basically changes the awkward scrolling behavior into the normal, expected behavior.

When you dynamically add content to a div with -webkit-overflow-scrolling: touch; that exceeds the div in height, it becomes broken and unscrollable. You can fix this by constantly having an inner div, that triggers the scrollbar because its 1px higher than the outer div:

.outer {
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  /* More properties for a fixed height ... */
}

.inner {
  height: calc(100% + 1px);
}

 

13 thoughts on “How we fixed the -webkit-overflow-scrolling: touch; bug on iOS

  1. Vera

    Thanks a lot for this post! It helped to solve exactly the same problem! In our case this happened only in iOS8.

    Reply
  2. Vera

    However, your solution may cause double scrollbar in some situations. Therefore you might also end up using -webkit-transform: translateZ(0); on a child container.

    Reply
  3. Oliver

    Dude, you’re a genius!! I was trying to solve this DAYS ago, magic weird solution for a stupid IOS issue. Thanks a lot!

    Reply
  4. iegit

    Have just solved this problem using before and after pseudo elements:

    .outer:before {
    content:””;
    width: 1px;
    float: left;
    height: calc(100% + 1px);
    margin-left: -1px;

    }
    outer:after{
    content:””;
    width: 100%;
    clear: both;
    }

    Reply
  5. james

    In my ember app, I was able to workaround this by removing the div from the DOM, adding the content that causes the overflow, then rerendering the element, such that it has overflow content on initialization.

    Reply
    1. sheldon

      I’m having a similar problem in my Ember app.
      Can you explain your steps a little more?

      I’m having the div rendered dynamically in a Component.

      Reply
  6. mahdi

    Wow, thank you so much, however 100%+1px doesn’t work for me but it worked with setting outer 99% and inner 100% .

    Reply
  7. Gunho Park

    guys,

    I think I’ve found the best solution.

    You just need to have a separate css as below
    .makeScrollable{
    -webkit-overflow-scrolling: touch;
    }

    and add that class to the outer container after the dynamic contents are added.

    Reply
  8. Nicholas Fletcher

    I had a problem with -webkit-overflow-scrolling today, I use it in several regions on a site that needs to scroll fluidly on mobile. There are modals involved and in one condition where a modal is closed it breaks the rendering of the main -webkit-overflow-scrolling section below it.

    Setting that section temporarily to -webkit-overflow-scrolling: auto when the modal is open and then back to scrolling when closed fixed my problem.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *