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!