Mobile Safari (iphone) issue with position: fixed – content running over the top?

[grimski]

I’ve been doing a bit of reading on my issue and peoples views seem a bit mixed as to its support. I would assume it behaved like desktop browsers – but apparently not, given the issue I’m having.

I have a _nav_ element which contains an unordered-list. For mobile/tablet devices this is positioned at the very top of the page using _position:fixed_ and a high z-index, lets say 10000 (lol).

When I scroll on my iphone, most of the a lot scrolls behind the dark green coloured bar at the top of the site as you’d expect. BUT certain items seem to display over the top of it. The item at first does appear to go behind the nav element but when you remove your finger, it then pops through. These items vary from divs, to images, to forms? None of which have anything specific done to them in terms of position/z-index.

Its strange, I have 2 box styles (.box1 and .box2) both using the same mark up, just different images/colours and 1 will display over the top but the other won’t.

Anyone experienced anything like this, is it a known issue? I know a solutions would be to just use position:absolute as you can tap the top of your iphone to get back to the top – but I’d like to get to the bottom of this, if possible!

Thanks, look forward to some ideas!
Steve

[dfogge]

ah position fixed…one of the trickier aspects of web design ever since mobile became a thing. here are a few posts you might want to read on the topic:

http://updates.html5rocks.com/2012/09/Stacking-Changes-Coming-to-position-fixed-elements

http://bradfrostweb.com/blog/mobile/fixed-position/

http://www.quirksmode.org/blog/archives/2012/10/budding_consens.html

http://www.quirksmode.org/blog/archives/2011/12/position_fixed.html

good luck!

[grimski]

I thought that’d be the case @Eric

I think position:absolute is a reasonable solution and not a ‘cop out’.

Thanks for the links @dfogge, I can’t find my issue mentioned anywhere but there certainly seems to be lots of little bugs so probably best to stay clear of it for now.

Could it be the elements that display over the top of the fixed nav have _position relative_ and no z-index set? I’m speaking to a few people about this so I’ll update if I find a solutions.

Thanks again,
Steve

[grimski]

Doh! I think I let the fact it was only happening on mobile get in the way of commonsense.

You were right the div that surrounded the fixed element had a relative position set. Removing this sorted the problem – thanks a lot @Eric! :)

[Author]

Posts