iOS 9 Safari: changing an element to fixed position while scrolling won't paint until scroll stops
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?
position: sticky in CSS, albeit behind a prefix. You can keep your jQuery plugin for everything else and use the native CSS solution for iOS where it supports it (7+, if I recall correct).
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.
The only solution that I found to work correctly was to disable z-index translations on direct children of the fixed item, e.g.:
.is-sticky > * {
-webkit-transform: translateZ(0);
}
I fixed this problem with an extra fixed element. After some testing I found out that it's the first element that becomes fixed has this problem. The 2nd, 3rd, etc works fine on iOS devices.
So, put right after your body openingtag a div.fixed-fix:
.fixed-fix {
position:fixed;
top:-1px;
height:1px;
width:100%;
background:white;
}
now it works! The fixed-fix div MUST have a backgroundcolor, because otherwise it wont work...
translate option very glitchy
jQuery Sticky Kit and other similar plugins, even being well coded, are presenting this kind of behavior on iOS 9, and it is not the first time that something like this happens. The main point here is that Firefox Safari and Safari Mobile support the experimental position: sticky;, so did Google (Chromium) but, due to integration problems, has had to temporarily disable it, you can read more about it here. Having said that, my guess is that, very soon, position: sticky; will be part of the CSS specification and supported by all major browsers, thus I think the best approach to solve this issue is to use a polyfill instead of a plugin. Of course, a polyfill will not cover all the features and functionalities that these plugins offer. Nevertheless, in many situations, using a polyfill will do the work, as a robust and effective solution supported by all major browsers. In my opinion it is the way to go, for now. I personally use stickyfill although I am sure other polyfills in the wild will do the trick. All I can say is that, since I started using a polyfill instead of plugins, I have not had any browser compatibility issues.
Add this to your fixed element
Using a Mixing: @include transform(translate3d(0px,0px,0px))
Using CSS: translate3d(0px,0px,0px)
Follow WeChat
Success story sharing
translate3d()caused some layout issues for me, buttranslateZ(0)worked a charmtransform: translateZ(0);to the default element style fixed this and now the style transitions happen smoothly during scrolling. Wonderful! Thanks everybody! (Tested in Chrome and Safari on iPad Mini with iOS 10.0.2)