Grow your CSS skills. Land your dream job.

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

  • # January 26, 2013 at 5:56 am

    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

    # January 26, 2013 at 10:10 am

    That’s just how iPhone works in afraid

    # January 26, 2013 at 10:55 pm

    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!

    # January 27, 2013 at 7:36 am

    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

    # January 27, 2013 at 2:58 pm

    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.

    # January 30, 2013 at 1:42 pm

    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! :)

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".