-webkit-overflow-scrolling Problems with objects inserted in the DOM

Question

I use -webkit-overflow-scrolling: tap for native scrolling capabilities on my iPad. But I ran into a rather strange problem:

I have one div with different children. If these children are large enough to create the need for scrolling, the device scrolls correctly correctly, with momentum and all. However, if this div is not large enough to require scrolling, and suddenly elements are inserted into it and now scrolling is required, you will not be able to scroll the element at all.

I hope this was not too incredibly confusing, but if someone could shed light on what to do in this situation, it would be fantastic. There is not much documentation about this property.

EDIT: Tried this a lot, and now it seems like it's just a problem with an intermittent situation. Every 1 out of 5 times or so, scrolling just fails for my entire web application regardless of content.

Answer 1

I had the same problem and it seems to me that assigning a CSS class after adding a new DOM element works fine:

 // your code to add a div to the DOM // the div contains a scrollable div with the content class setTimeout(function(){ // this is using JQuery div.find(".content").addClass("overflowScroll"); }, 1); // CSS class .overflowScroll { overflow: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; } // The HTML for the div // I am adding a dynamic list to the content div // which should use the overflow scroll <div class="panel"> <div class="header"> </div> <div class="content"></div> </div>