Background color switching to transparent while scrolling in WebKit browsers

Question

I am working on making a fixed navigation web site. I have a navigation bar fixed at the top of the screen using absolute positioning. The CSS looks something like this:

.navbar {
    background-color: #1f1f1f
    top: 0px;
    position: fixed;
    width: 100%;
}

And here is my HTML:

<header class="navbar">...</header>

This should be pretty simple, but for some reason I am seeing the background of the navigation flicker between #1f1f1f and what I would describe as simply transparent.

I can get the scroll position to a point where the background color is transparent. At that point, when I inspect the element in the WebKit inspector, the expected styling is there. A background-color of #1f1f1f and basically everything else I mentioned above.

I can toggle the background-color property on and off in the inspector, and that will, more often than not, make the background come back to normal.

Finally, this only seems to be an issue with WebKit based browsers. I can reproduce the issue in Chrome and Opera, but not in Firefox or Internet Explorer. I also don't seem to be able to reproduce this in Safari, at least not in version 7.0 (9537.71) I am also using the Startup Design Framework and the website does feature a video in the background underneath the content <div>, similar to that demo page. Could this be causing some sort of rendering glitch?

More Info: I removed the background video <div> from the page, and this appeared to solve the issue entirely. This isn't really an ideal solution, though. Are there any known issues with background videos?

Answer 1

You should try a couple different things. First try stacking the item with z-index:

z-index: 1000000; /* max: 2147483647 */

Next, you can try and force hardware acceleration on your menu. The browser will create new rendering layers for your menu which may prevent the flicker.

-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

And finally, if your element is larger than the screen (even by one pixel in any direction), it can cause flickering during scrolling on some devices. Try adding the following:

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;

Answer 2

I recently had the same problem with webkit browsers. All you have to do is add this in your .navbar class in css and see if it works:

backface-visibility:visible; -webkit-backface-visibility: visible; -webkit-transform: translateZ(0);

Answer 3

try this:

.navbar {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
margin-bottom: 0;
background-color: #1f1f1f
}

Answer 4

.navbar {
   left: 0;
   position: fixed;
   top: 0;
   width: 100%;
   background-color: #1f1f1f;
   z-index: 1030;
}

Answer 5

Have you tried to use Firebug to debug the issue? I would suggest you to use Firebug to debug this issue.