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!
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:
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.
Huh I read that incorrect. If coded correctly it shouldn't pop up behind the elements. It will however stay behind why scrolling and when you release your finger it pops in front.
Make sure your nav is not in another positioned div. just put it above everything else right after the opening body.
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
That's just how iPhone works in afraid
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!
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
Huh I read that incorrect. If coded correctly it shouldn't pop up behind the elements. It will however stay behind why scrolling and when you release your finger it pops in front.
Make sure your nav is not in another positioned div. just put it above everything else right after the opening body.
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! :)