css - iOS 9 Safari: changing an element to fixed position while scrolling won't paint until scroll stops

Question

I've been developing a site and taking advantage from the rather good jQuery Sticky Kit plugin. It operates by switching the position property to fixed and back when appropriate. Runs very smoothly in desktop and acceptably so in mobile.

Or at least it used to. iOS 9 comes with a new behavior: if the position of an element changes from static/relative/absolute to fixed while the scroll animation is ongoing the element becomes invisible until after the scroll has come to a stop. Oddly enough the opposite change (from fixed to whatever else) is performed without issues.

A working example can be found on the plugin's homepage. The black navigation bar ("Examples Reference") is supposed to be sticky. Originally it's staticly positioned in mid-page. As you scroll down it becomes fixed and (in iOS 9) disappears until scroll stops. Behavior in desktop browsers and iOS 8 is correct.

I was kind of hoping for the typical CSS workarounds: forcing a 3D transform, disabling backface visibility and the like, obscure proprietary properties, ... But nothing seems to work.

Are we about to forget "stickable" elements altogether now that it was working?

Answer 1

I had this same issue and was able to hack around it using the old "force a 3D transform" trick. Just set the element you are going to switch the position of to have a transform property of translate3d(0px,0px,0px). Make sure this is done before the position property is changed.