IOS 9 Safari: changing an item to a fixed position until scrolling is shown until scrolling

Question

I am developing a site and use a good jQuery Sticky Kit plugin. It works by switching the position property to fixed and vice versa when necessary. It works very smoothly on the desktop and, quite possibly, on mobile devices.

Or at least earlier. iOS 9 comes with a new behavior: if an element’s position element changes from static / relative / absolute to fixed while the scroll animation continues, the element becomes invisible until the scroll reaches a stop. Oddly enough, the opposite change (from fixed to any other) is done without problems.

A working example can be found on the plugin home page . The black navigation bar ("Case Reference") should be sticky. Initially, it is static located on the middle page. When you scroll down, it becomes fixed , and (on iOS 9) disappears until the scroll stops. Behavior in desktop browsers and iOS 8 is correct.

I kind of hoped for typical CSS workarounds: forcing a 3D conversion, turning off visibility on the back, etc., hidden property properties ... But nothing works.

Are we going to forget about the “sticking” elements now that it has been working?

Answer 1

I had the same problem and managed to crack it using the old "force the 3D transform" trick. Just set the element you are going to switch the position to in order to have the translate3d(0px,0px,0px) conversion property. Make sure that this is done before changing the position property.

Answer 2

The only solution I found to work correctly is to disable z-index translations on the direct children of a fixed element, for example:

 .is-sticky > * { -webkit-transform: translateZ(0); } 

Answer 3

I fixed this problem with an extra fixed element. After some testing, I found out that this is the first item that is being fixed, has this problem. 2nd, 3rd, etc. Works great on iOS devices.

So put immediately after your body opentag div.fixed-fix:

 .fixed-fix { position:fixed; top:-1px; height:1px; width:100%; background:white; } 

now it works! The fixed fix div MUST has a background color, because otherwise it will not work ...

Answer 4

The jQuery Sticky Kit and other similar plugins, even when well encoded, present this behavior on iOS 9, and this is not the first time that something like this happens. The main thing is that Firefox Safari and Safari Mobile support an experimental position: sticky; , also Google (Chromium), but because of integration problems I had to temporarily disable it, you can learn more about it here . Having said that, I suppose very soon position: sticky; will become part of the CSS specification and will be supported by all major browsers, so I believe that the best solution to this problem is to use polyfill instead of a plugin. Of course, polyfill will not cover all the functions and functionality offered by these plugins. However, in many situations, using polyfill will do the job as a reliable and efficient solution, supported by all major browsers. In my opinion, this is the way to go now. I personally use stickyfill , although I'm sure that other polygons in the wild will do the trick. All I can say is that since I started using polyfill instead of plugins, I had no browser compatibility issues.

Answer 5

Add this to your fixed element
Mixing use: @include transform(translate3d(0px,0px,0px))
CSS usage: translate3d(0px,0px,0px)