[Solved] Safari for iOS: z-index order bug scrolling a page with a fixed element

[ChristopherC]

Hi there!

I ran into an iOS bug a couple of days ago. After searching the entire web upside down for a solution and experimenting with different workarounds of my own, I’m kindof clueless now.

I stumbled on a StackOverflow question ( http://stackoverflow.com/questions/16033416/while-scrolling-on-an-ios-device-the-z-index-of-elements-isnt-working ) where the guy has the same issue, but seeing that no one answered, I thought that this forum would be my last chance. It’s by lurking around here that I’ve found many of my answers after all, so thanks heaps btw!

As for the issue, it’s actually really simple – let’s say you have an header on top of a page which has a static position, and a little menu button on the top right corner of the page set with a fixed position. For some design reasons, I want the menu button to hide underneath the header when they overlap (and also under the menu when it is expanded). I do so by making sure that the z-index of the menu button is lower than the one from the header, and everything works great on the desktop versions of Firefox, Chrome and Safari, but it’s kind of failing in Safari for iOS (haven’t tried other browsers).

I’ve come up with a simple example: http://plnkr.co/aeubN4
If you open this page in iOS and click the “Launch Fullscreen” button, you’ll see what I’m talking about. Just scroll down until the red square is not touching anymore the orange box, then release the scroll, and scroll back to the top again. While you scroll back up, you’ll see the red square now being above the orange box when it should be underneath, and if you stop scrolling, it will get back below after a small delay.

One of my ideas was to workaround this issue using JavaScript and the scroll event, but then, as shown in the example which displays the window’s page offset whenever the scroll event is fired, I’ve realized that Apple have internally optimized their browser through a debounce method, causing the scroll event to trigger only once: when the scroll stops. The small delay required by iOS to restore the correct z-index ordering seems to match the triggering of the scroll event.

Interestingly, as discovered by the guy who asked the question on SO, the bug seems to be resolved when setting the z-indices in the negative range. Unfortunately, this is not a solution for me as it’s breaking the links.

I was about to decide to leave the menu button always on top of the header instead of hiding it underneath, but then the same problem occurs when the static menu is being shown and that the fixed menu button should definitely be hidden below the menu.

For now the best solution that I’ve found is to hide the menu button when the scrolling starts (using the touchmove event with a debounce function), and show it again when it stops (using the scroll event). I’m not so happy about this solution because I’d really like it to stay visible while scrolling… but I just can’t figure out how, any idea?

Thanks in advance!

PS: yes, I do really want to have this menu button fixed, and only the button! :)

[ChristopherC]

Well, I totally gave up on this one and ended up submitting a bug to Apple (I’m wondering if they actually pay attention to those?), but finally someone came up with an answer on StackOverflow: adding -webkit-transform: translate3d(0,0,0); to the elements on top fixes it somehow!

So it’s all sorted now, thanks!

[danu]

awesome! that worked really well–you’ve totally helped me out =D

[Historical Forums User]

Found this after hours of searching and reading up on z-index. Thank you! And for other people who find this, the issue may appear only after scrolling the page down, resizing, and then scrolling back up.

-webkit-transform: translate3d(0,0,0); added to the header (what I was hiding an element behind) worked flawlessly.

[ravioli]

If only you knew how much trouble you’ve saved me! I was ready to end it all and go be a painter.

[Mary]

:( that did not work for me…I have a fixed scroll-to top button that shows up after scroll but after I put the sections to position relative it doesnot show up (only in safari) untill I scroll to the footer (where it acyually isin an include), I did put them z-index in the right order and added the webkit translate to the button but no…and I used to be a painter…

[GreggOd]

Ahh thank you so much! This fixed an issue for us with the footer popping above the content on scroll.

[nidesing]

the worst part is that all kind of moblie simulators wont show anything, you see the actual issue only on actual device
if i would be able to see same issue in simulator or responsive design test tools, how easy that would be!

[Julie]

Reply for Mary :

For me does not work too this [translate3d] solution. But trying it I found my issue ;)

Put [position: relative] = I have tried for each div and finally I found the good place to add [position: relative].
Without this [position: relative], working fine on other browsers, but not on Safari.

[Author]

Posts