Chrome rendering issue. Fixed position anchor with UL in body

Chrome solution:

Adding -webkit-transform: translateZ(0) to the #sidebar fixed the issue for me.

I've used translateZ(0) to fix numerous Chrome display bugs over the years. The rationale is that by invoking 3D transformation, re-paint is separated from the rest of the CSS pain stack (I can't provide much more detail than that, it's pretty much all Greek to me). In any case, it appears to work for me!

    #sidebar {        -webkit-transform: translateZ(0);    }

Opera solution:

This is not a generic solution (will need to be tweaked depending on the positioning requirements of the element in question). It works by forcing continuous repaints (via CSS animation) on a property that could affect layout (forcing other layout factors to be calculated and rendered, ie maintaining fixed positioning), but in practice do not. In this case, I've used margin-bottom, because there's no way that's going to affect your page layout (but Opera doesn't know that!):

@keyframes noop {  0%   { margin-bottom: 0; }  100% { margin-bottom: 1em; }}#sidebar {    animation: noop 1s infinite;}

Note: the solution is not perfect, in that (on my machine at least) the bug test cases will result in a minute flicker as Opera loses positioning and quickly redraws. Sadly I think this is as good as you will get, because as George says in his answer, this is Opera's natural behaviour between redraws — in theory my code makes redraw for the element continuous, but in practice there will be infinitesimal gaps.

EDIT 2 (2013-11-05): I've since encountered variations of this bug quite often. Although the original poster's reduced test case presents a perfectly legitimate bug, most occurences have been in situations where there is already a 3D transform operating on the body (or similarly high up the DOM tree). This is often used as a hack to force GPU rendering, but will actually lead to nasty repaint issues like this. 2 no-op 3D transforms don't make a right: if you're using one higher up the tree, try removing it first before adding another one.

EDIT 3 (2014-12-19): Chris reports that translateZ(0) doesn't work in some cases where scale3d(1,1,1) does.

The key for Chrome is:

 html, body {height:100%;overflow:auto}

By adding this, the fixed position problem should be fixed.

It makes sense if you understand how Normal Flow of the document works. Let's say it's an edge case scenario.

There is no height declared in any element and #sidebar is taken OUT of the normal flow of the document by being position:fixed.

If you add a height property to #sidebar (pixels, not percentages) the problem is solved.

I would suggest including Normalize.css, I think it will take care of the bug.