3

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?

Improve this question
9
  • 1
    Hard to help you without knowing details about the background video and etc, the one most obvious thing I can see from looking at the Startup Design Framework you posted is: .visible { opacity: 1 !important; } Commented Jan 23, 2014 at 14:08
  • Thanks JackArbiter. I realize this is a bit of a vague question. Unfortunately it's a bit hard for me to give more details, since the site is pretty complex. As far as I know, we're using a very similar structure to the Startup Framework's demo site. I guess my question is if there are any known bugs in Chrome's version of WebKit that would cause the issue I'm seeing. I appreciate you taking the time to reply. Could you elaborate a bit about the .visible { opacity: 1 !important } that you found? I can't seem to actually find that bit in our local copy of the CSS, but it seems important. Commented Jan 23, 2014 at 15:53
  • 1
    Actually looking at that again it is css for smaller elements with the visible class. The background video has opacity: 0.7; but I think that is to reduce opacity not increase it. If you look at the link you provided in Chrome and use the developer tools console (f12) you can select the video section and its children and see if there are any differences between their css and the css of your site. Also note that they provide the video in a variety of formats, though that shouldn't matter so long as the vid is mp4, webm, or ogg since Chrome supports all 3 of those. Commented Jan 23, 2014 at 16:05
  • 1
    Looked around during lunch, one person who had a similar issue (today) found that the fix was to use the complete url rather than a relative one. stackoverflow.com/questions/9275802/… (bottom answer) note that the op might not be directly related as said bug was "fixed" but the answer by chris edwards might be what you're looking for. Commented Jan 23, 2014 at 17:37
  • We're definitely going to compare CSS and HTML. At this point, this isn't a major issue, but it will need to be fixed before we release this project. I think there are some pretty glaring differences between HTML. We're providing all of the recommended formats, but the absolute vs. relative linking thing is interesting. I'll have to try that when I next get the chance. It wouldn't be surprising to me if it was something odd like that. Thank you again for your help, and I'll be sure to keep this question up to date! Commented Jan 23, 2014 at 19:38

5 Answers 5

Reset to default
4
+150

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;
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks Ryan! These suggestions definitely seemed to help, and I really love how you've explained what everything does. I appreciate it!
1

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);

Improve this answer

Comments

0

try this:

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

3 Comments

It will be nice if you explain to OP why this is the answer.
Sorry, I made a mistake in my original post. The obvious flaw is that I was using position: absolute. I was actually using position: fixed as described here. I'm afraid, making the other changes didn't fix the issue.
Experimented a bit more with this, please see the "More Info" section above. It would appear the background video is the culprit.
0 
.navbar { left: 0; position: fixed; top: 0; width: 100%; background-color: #1f1f1f; z-index: 1030; }
Improve this answer

2 Comments

It will be nice if you explain to OP why this is the answer.
Aside from different formatting and the lack of margin-bottom: 0 this looks to be basically the same answer as kamuken above, which didn't resolve the issue. Am I missing something?
-1

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

Improve this answer

1 Comment

I haven't really looked at it. The issue doesn't actually happen in Firefox, so it might be a bit difficult to debug in Firebug. I'm using the Webkit Inspector in Chrome. In any sense, thanks for the suggestion.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.