I am creating a page that should have some elements that adhere to the top of the page when they will otherwise scroll from the screen. I managed to do this using position:absolute . Everything worked fine, but you had to scroll the scroll. I added -webkit-overflow-scrolling: touch in the css scrollable area. It broke everything. My sticky elements with position:absolute now just scroll with the rest of the content.
My question is:
Why -webkit-overflow-scrolling: touch affect absolute positioning, and is there a way around this?
UPDATE: I added a warning when the child becomes “fixed” or “uncommitted”. Warnings continue to fire, so styling is still being applied, it just doesn't work. This means that this is not a problem with tracking scroll position, but rather a problem with style.
UPDATE: I tried using position: fixed instead of position: absolute and -webkit-overflow-scrolling also broke
UPDATE: after repeated searches, I found links to this problem here and here . However, the only proposed solution in both cases is the restructuring of the DOM, so that the sticky elements are not in the scroll area. This is very difficult to do in my case, and I would prefer not to. Has something changed with ios5 or is this the only option?
source share