2

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?

halfer
  • 19,824
  • 17
  • 99
  • 186
Jesse Dunlap
  • 1,280
  • 1
  • 16
  • 22
  • 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; } – JackArbiter Jan 23 '14 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. – Jesse Dunlap Jan 23 '14 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. – JackArbiter Jan 23 '14 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. http://stackoverflow.com/questions/9275802/css-background-image-disappearing-in-chrome (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. – JackArbiter Jan 23 '14 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! – Jesse Dunlap Jan 23 '14 at 19:38
  • @Jesse If you cant give us a demo can you just link us to the site? Its one of them things where we need to mess about with multiply options to get it working. – Ruddy Jan 27 '14 at 10:44
  • Ruddy, let me see if I can put together a simplified demo and reproduce the issue. The website is for a client, so I can't just give the link to it. I'll keep you all posted, and thanks again for all the help! – Jesse Dunlap Jan 27 '14 at 16:04
  • I believe a combination of the suggestions below, and re-organizing our HTML solved the issue. At the very least, I can't seem to reproduce it anymore. Thank you all so much for your help. I'll be sure to comment here when we figure out what the issue was. At this point, I'm not exactly sure. Thanks again! – Jesse Dunlap Jan 28 '14 at 15:39
  • It looks like the accepted answer below definitely solved the issue. Particularly, I think forcing the browser to hardware accelerate the menu with the ``transform`` properties did the trick. – Jesse Dunlap Jan 28 '14 at 15:48

5 Answers5

3

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;
Ryan Wheale
  • 26,022
  • 8
  • 76
  • 96
  • Thanks Ryan! These suggestions definitely seemed to help, and I really love how you've explained what everything does. I appreciate it! – Jesse Dunlap Jan 28 '14 at 15:40
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);

Freelance PHP Programmer
  • 370
  • 1
  • 7
0

try this:

.navbar {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
margin-bottom: 0;
background-color: #1f1f1f
}
wpdaniel
  • 714
  • 8
  • 25
  • 2
    It will be nice if you explain to OP why this is the answer. – WGS Jan 20 '14 at 22:23
  • 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. – Jesse Dunlap Jan 20 '14 at 22:25
  • Experimented a bit more with this, please see the "More Info" section above. It would appear the background video is the culprit. – Jesse Dunlap Jan 20 '14 at 22:31
0
.navbar {
   left: 0;
   position: fixed;
   top: 0;
   width: 100%;
   background-color: #1f1f1f;
   z-index: 1030;
}
Ram
  • 130
  • 9
  • 1
    It will be nice if you explain to OP why this is the answer. – KyleMit Jan 23 '14 at 14:24
  • 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? – Jesse Dunlap Jan 23 '14 at 15:49
-1

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

halfer
  • 19,824
  • 17
  • 99
  • 186
Roxx
  • 3,738
  • 20
  • 92
  • 155
  • 1
    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. – Jesse Dunlap Jan 28 '14 at 15:42