-webkit-overflow-scrolling breaks absolute positioning

Question

I am building a page that needs to have some elements which stick to the top of the page when they would otherwise be scrolled off the screen. I managed to do this using position:absolute . Everything was working perfectly, but it needed momentum scrolling. I added -webkit-overflow-scrolling: touch to the css of the scrollable area. This broke everything. My sticky elements with position:absolute are now just scrolling with the rest of the content.

My question is this:

Why does -webkit-overflow-scrolling: touch affect absolute positioning, and is there a way around this?

UPDATE: I added an alert whenever a child element becomes "fixed" or "unfixed". The alerts continue to fire, so the styling is still being applied, it just isn't working. This means that it's not a problem with keeping track of scroll position but rather a problem with the styling.

UPDATE: I tried using position: fixed instead of position: absolute and -webkit-overflow-scrolling broke that too

UPDATE: After a lot of digging, I found references to this problem here and here . However, the only proposed solution in both cases is to restructure the DOM so that the sticky elements are not in the scrollable area. This is a difficult thing to do in my case, and I would prefer not to have to. Have things progressed since ios5 or is that still the only option?

Answer 1

On the last question - yes the issue is present in ios5. Extracting the absolute positioning element outside of the scrollable area worked fine for me.