title: Background color switching to transparent while scrolling in WebKit browsers
body: <p>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:</p>
  
  <pre><code>.navbar {
      background-color: #1f1f1f
      top: 0px;
      position: fixed;
      width: 100%;
  }
  </code></pre>
  
  <p>And here is my HTML:</p>
  
  <pre><code>&lt;header class="navbar"&gt;...&lt;/header&gt;
  </code></pre>
  
  <p>This should be pretty simple, but for some reason I am seeing the background of the navigation flicker between <code>#1f1f1f</code> and what I would describe as simply <code>transparent</code>. </p>
  
  <p>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 <code>background-color</code> of <code>#1f1f1f</code> and basically everything else I mentioned above.</p>
  
  <p>I can toggle the <code>background-color</code> property on and off in the inspector, and that will, more often than not, make the background come back to normal.</p>
  
  <p>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 <code>7.0 (9537.71)</code> I am also using the <a href="http://designmodo.com/startup/" rel="nofollow noreferrer">Startup Design Framework</a> and the website does feature a video in the background underneath the content <code>&lt;div&gt;</code>, similar to that demo page. Could this be causing some sort of rendering glitch?</p>
  
  <p><strong>More Info:</strong>
  I removed the background video <code>&lt;div&gt;</code> 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?</p>