Canvas with negative z-index scrolling issue in Chrome

Question

Description

There is a problem with the negative z-index of canvas. In principle, when in a fixed position there are 2 elements, one of which is a block element, and the other is a canvas, and the z-indexcanvas is negative, it will scroll the second, regardless of it z-index.

This error only occurs on Chrome: Mac and PC.

Code example

Here's a sample HTML (led to a question):

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

<div>
    <canvas />
</div>

And 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 omit JavaScript, as I am sure this is not a problem.

You can see the error in action in jsFiddle

Some are trying to solve this problem, but I can not use ...

After several attempts, here is what solved the current problem, but caused problems at other points:

• Setting overflow:visibleon ul;
  • - , , $.fn.slideDown() . jQuery overflow hidden, .
• position:relative li span - ;
  • , , ... . . .
• z-index (-2 on canvas, -1 on ul);
  • , IOS (, , , ).
• z-index;
  • , iOS . . .

Answer 1

, Chromium/webkit ( blink), , , HTML :

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

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