I just ran across an issue with a element (the header), fixed positioned to the top of the page, disappearing. This was found in a mobile site I was creating.

What was causing this was a click to a menu button, which would open the sidebar navigation. When I clicked this button, the sidebar would open as expected, but then the header would disappear. What would be left of it was the remnants of an image replacement technique I was using the Phark Method; the text "menu" was left behind. (I'm fairly sure that this is not important to the issue at hand, but I could be wrong.)

The header element had styling like so:

header{
    position: fixed;
    top: 0;
    z-index: 10000;
    width: 100%;
    background: url('../images/header-bg.png') #111 repeat-x top left;
    border-bottom: 1px solid #090909;
    text-align: center;
}

This would only happen in Android 4.0 stock browsers (Galaxy Tabs/Galaxy Nexus were some I tested).

What would cause this to happen in just Android 4.0 browsers?

I just ran across an issue with a element (the header), fixed positioned to the top of the page, disappearing. This was found in a mobile site I was creating.

What was causing this was a click to a menu button, which would open the sidebar navigation. When I clicked this button, the sidebar would open as expected, but then the header would disappear. What would be left of it was the remnants of an image replacement technique I was using the Phark Method; the text "menu" was left behind. (I'm fairly sure that this is not important to the issue at hand, but I could be wrong.)

The header element had styling like so:

header{
    position: fixed;
    top: 0;
    z-index: 10000;
    width: 100%;
    background: url('../images/header-bg.png') #111 repeat-x top left;
    border-bottom: 1px solid #090909;
    text-align: center;
}

This would only happen in Android 4.0 stock browsers (Galaxy Tabs/Galaxy Nexus were some I tested).

What would cause this to happen in just Android 4.0 browsers?

• javascript
• android
• css
• mobile
• android-4.0-ice-cream-sandwich

1 Answer 1

What seemed to be the issue was the fact that the header element did not have a left property value. To fix this, I just added a left:0; property to the header element, giving me the following CSS:

header{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 100%;
    background: url('../images/header-bg.png') #111 repeat-x top left;
    border-bottom: 1px solid #090909;
    text-align: center;
}

After figuring this out, I recall having a similar issue on a desktop site that used fixed positioning. The fact that I didn't have a left property set caused the fixed element to not even appear when the page loaded.

Hope this fixes/sparks ideas to a fix for users in the future! I know I'll be setting both a x and y axis position property to all my fixed elements from now on ;)