Is it possible to get Chrome to honour backface-visibility: hidden when set on an element container a canvas with a WebGL context?

问题

This appears to be a bug with Chrome, but just in case someone has come up with a simple CSS workaround. I've filed a bug report with a test case and there is also a JSFiddle. The issue is when transforming an element with backface-visibility: hidden. If there is a child element with a WebGL context, Chrome will display it anyway. Setting transform-style: preserve-3d or backface-visibility: hidden directly on the canvas make no difference. It works correctly if the transform is only applied to the canvas itself, but unfortunately my use case makes this impossible.

function drawWebGL ( canvas ) {
    var gl = canvas.getContext( 'webgl' );
    gl.clearColor( 0.8, 0.8, 0.8, 1 );
    gl.clear( gl.COLOR_BUFFER_BIT );
}

drawWebGL( document.querySelector( 'canvas' ) );

.container {
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    background: #f00;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    padding: 17px;
}

@keyframes spinY {
  from { transform: rotateY(  0deg); }
  to   { transform: rotateY(360deg); }
}

.container.-flip {
    border: 1px solid red;
    animation: spinY 4s infinite linear;
}

<div class="container -flip">
  <canvas width="66" height="66"></canvas>
</div>

<div class="container -flip">
  <div>some text</div>
</div>

来源：https://stackoverflow.com/questions/44860505/is-it-possible-to-get-chrome-to-honour-backface-visibility-hidden-when-set-on-a