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);


30 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.

  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.

    1. shiv

      .class::-webkit-scrollbar {
      display: none;
      for chrome and other browsers

      for I,E you can use .
      on child div
      -ms-overflow-style: none;

      to avoid double scroll bar…

  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!

  4. iegit

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

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

    width: 100%;
    clear: both;

  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.

    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.

  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% .

  7. Gunho Park


    I think I’ve found the best solution.

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

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

  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.

  9. Pingback: кнопка F1 » Баг on iOS scroll

    1. scottsd

      I had to follow a similar approach to this as well. I had to remove the overflow:scroll from my css, then in a javascript delay for 300ms then set the container overflow:scroll after the page was visible.

  10. Wesley

    For the poor souls that hit this bug and can’t seem to find a fix. For me, the freezing was repeatable and happened when trying to scroll up or down when already at the top or bottom, respectively. The fix was to add some listeners for touchstart and touchmove and detect these cases and event.preventDefault() on ’em.

    Good luck and keep fighting!


Leave a Reply

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