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


28 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. 33Dirk

    I must say it was hard to find your site in google. You write great posts but you
    should rank your page higher in search engines. If you don’t know how to do it search on youtube: how to rank a website Marcel’s way


    Hello just wanteed to give you a brief heads up and let you know a few of the pictues
    aren’t loading correctly. I’m not sure why but I think its
    a linking issue. I’ve tried iit in two different
    internet brosers and both show thee same outcome.


    I’ve been exploring for a bit for any high-quality
    articles or blog posts on this kind of area . Exploring in Yahoo I ultimately stumbled upon this site.
    Reading this info So i am gllad too show that I’ve a very excellent uncanny feeling I discovered
    jujst what I needed. I mst definitely will make sure to don?t omit this site annd give it a glance onn a constant basis.


Leave a Reply to Stefan Cancel reply

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