Home › Forums › CSS › [Solved] Safari for iOS: z-index order bug scrolling a page with a fixed element
- This topic is empty.
-
AuthorPosts
-
August 12, 2013 at 2:24 am #146484
ChristopherC
ParticipantHi 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 thescroll
event is fired, I’ve realized that Apple have internally optimized their browser through a debounce method, causing thescroll
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 thescroll
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 thescroll
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! :)
August 15, 2013 at 6:13 am #146895ChristopherC
ParticipantWell, 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!
May 23, 2014 at 9:03 pm #170978danu
Participantawesome! that worked really well–you’ve totally helped me out =D
September 16, 2014 at 9:50 am #183265Historical Forums User
ParticipantFound 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.November 18, 2014 at 7:13 pm #188674ravioli
ParticipantIf only you knew how much trouble you’ve saved me! I was ready to end it all and go be a painter.
December 9, 2014 at 5:20 am #190407Mary
Participant:( 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…
April 12, 2016 at 2:45 am #240468GreggOd
ParticipantAhh thank you so much! This fixed an issue for us with the footer popping above the content on scroll.
July 1, 2016 at 5:17 pm #243323nidesing
Participantthe 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!September 1, 2018 at 2:56 am #275896Julie
ParticipantReply 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. -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.