Canvas with negative z-index issue on scroll in Chrome

Question

Description

There is an issue with canvas negative z-index. Basically, when there is 2 elements in fixed position, one being a block element and the other being the canvas, and the z-index of the canvas is negative, it will scroll over the second one no matter what's its z-index.

This bug only occur on Chrome: Mac and PC.

Code sample

Here's an HTML sample (reduced fo the question) :

<ul>
    <li><span>test1</span></li>
    <li><span>test1</span></li>
    <li><span>test1</span></li>
</ul>

<div>
    <canvas />
</div>

And the CSS

html,body{
    height : 150%;
}

ul {
    position : fixed;
    z-index : -1;
    top : 0;
    left : 0;
    width : 100%;
    margin : 0;
    padding : 0;
    overflow : auto;

    li {
        float : left;
        width : 33%;
        height : 100px;
        background : red;
        position : relative;
        list-style: none;

        span{
            display:block;
            position : relative;
        }
    }
}
div {
    position : fixed;
    z-index : -2;
    top : 0;
    left : 0;

    canvas{
        opacity : 0.5
    }
}

I am omitting the JavaScript since i'm sure it is not the problem.

You can see the bug in action in this jsFiddle

Some tries that kinda solved the issue, but that I cannot use...

After trying multiple things, here what solved the current issue but caused trouble on other points:

• Setting overflow:visible to the ul;
  • Somehow, that fix the problem, but I can't use that since I'm using $.fn.slideDown() on it. During the animation, jQuery set the overflow to hidden, making the bug visible when animating.
• Changing the position:relative of the li and span to something else;
  • That does work too, probably the best solution... if you don't have absolute element inside. Which is the case for me. I can't use that fix as well.
• Using only negative z-index everywhere (-2 on canvas, -1 on ul);
  • That does work as well, but it mess everything on IOS (and maybe other devices, didn't test everything).
• Not using negative z-index;
  • That would be the best, but iOS doesn't likes it. When scrolling, unpainted element will appear under the canvas until the scroll finish. This is an undesirable behaviour.

Answer 1

This seems to be a Chromium/webkit (or blink) bug, and this fixes it, meeting all your criteria and no changes needed on the HTML structure or the rest of the styles:

ul {
    /* rest of the styles */
    -webkit-transform: translate3d(0,0,0);
}

Demo http://jsfiddle.net/3a66445w/2/