Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    Jul 2011
    Posts
    101
    Thanks
    7
    Thanked 6 Times in 6 Posts

    Header Disappears (Safari/iPad)

    Hey guys, I've run into a problem I as hoping you could help with.

    On my site: my header disappears randomly, mainly in Safari. It'll be there now and then....

    It's absolute positioned so I'd assume it would stay at the top there. It'll appear the moment you go to inspect it too.

    Ideas?
    Last edited by bdbolin; 03-25-2013 at 02:28 AM.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    A couple of suggestions:

    Set the top for header - on one occasion in Safari/Win 7 it wasn't at the top of the screen.
    Set position:relative and z-index for the article element that should be sat underneath header - it looks to me like header is actually not visible underneath article when it doesn't shown.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • #3
    Regular Coder
    Join Date
    Jul 2011
    Posts
    101
    Thanks
    7
    Thanked 6 Times in 6 Posts
    Ah ok, interesting. I hadn't thought of setting the Top. I briefly tried the z-indexing last night yet with mixed results, but I'll try again this morning with fresh eyes. haha.

  • #4
    Regular Coder
    Join Date
    Jul 2011
    Posts
    101
    Thanks
    7
    Thanked 6 Times in 6 Posts
    No dice. With the article having z-index, it jumps infront of everything including the header, even though it has a lower value.

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    That sounds odd.
    Have you got that on your site now?
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • Users who have thanked SB65 for this post:

    bdbolin (03-24-2013)

  • #6
    Regular Coder
    Join Date
    Jul 2011
    Posts
    101
    Thanks
    7
    Thanked 6 Times in 6 Posts
    Good news, I found the problem! I had a snippet of code that jQuery Mobile recommended to fix a bug with. lol

    Code:
    .ui-page { 
    	-webkit-backface-visibility: hidden; 
    }
    Can anyone humour me and explain what that line actually does? Never head of backface-visibility before.

    Thanks!

  • #7
    Regular Coder
    Join Date
    Jul 2011
    Posts
    101
    Thanks
    7
    Thanked 6 Times in 6 Posts
    My next problem is that the page sometimes disables vertical scrolling :-\
    Ideas?
    Last edited by bdbolin; 03-24-2013 at 04:59 PM.

  • #8
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    If I navigate to e.g the portfolio page from the home page, the portfolio page body tag has the following classes:

    Code:
    ui-mobile-viewport ui-overlay-c ui-mobile-viewport-transitioning viewport-slide
    From which:

    Code:
    .ui-mobile-viewport-transitioning, .ui-mobile-viewport-transitioning .ui-page {
        -moz-box-sizing: border-box;
        height: 100%;
        overflow: hidden;
        width: 100%;
    }
    However, if I then reload the portfolio page the body classes change to just:

    Code:
    ui-mobile-viewport ui-overlay-c
    and hence that css is not applied. That's causing the absence of scrollbars.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • Users who have thanked SB65 for this post:

    bdbolin (03-24-2013)

  • #9
    Regular Coder
    Join Date
    Jul 2011
    Posts
    101
    Thanks
    7
    Thanked 6 Times in 6 Posts
    Ah ok. I'll take a look at that. Thanks!!

  • #10
    Regular Coder
    Join Date
    Jul 2011
    Posts
    101
    Thanks
    7
    Thanked 6 Times in 6 Posts
    Awesome, quick fix to that and it works. What lead me not to think of overflow was that when you drag the screen from the bottom, it was still actually visible - but yet it disabled the scrollbars.

    Anyways, thanks a ton for the help!

  • #11
    Regular Coder
    Join Date
    Jul 2011
    Posts
    101
    Thanks
    7
    Thanked 6 Times in 6 Posts
    How do I mark as resolved?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •