Possible bug in Chrome - Video controls are still visible when using backface-visibility:hidden on HTML5 videos

Question

I found a possible bug in Chrome.

Basically HTML5 native video controls are still visible when using backface-visibility:hidden on HTML5 video tag.

To reproduce it, click 12 times on the button in the example below.

Problem is visible on:

• Google Chrome Version 56.0.2924.87 (64-bit)
• Google Chrome Version 59.0.3033.0 canary (64-bit) (CANARY)

Test case works on:

• Firefox 52.0 (64-bit)
• Firefox 53.0a2 (2017-03-06) (64-bit)

I would like to know if you have faced this issue before and a possible work around to it.

PS: I am aware that could created some custom video controls, but I prefer to use the native ones.

 let elmBtn = document.getElementById('btn'); let elmVideo = document.getElementById('video'); let elmBox = document.getElementById('box'); let rotateY = 0; // start style elmVideo.style.transform = `scaleZ(1) translateZ(-500px) rotateY(${rotateY}deg)`; elmVideo.style.backfaceVisibility = 'hidden'; elmBox.style.transform = `scaleZ(1) translateZ(-500px) rotateY(${rotateY}deg)`; elmBox.style.backfaceVisibility = 'hidden'; elmBtn.addEventListener('click', event => { rotateY += 10; elmVideo.style.transform = `scaleZ(1) translateZ(-500px) rotateY(${rotateY}deg)`; elmBox.style.transform = `scaleZ(1) translateZ(-500px) rotateY(${rotateY}deg)`; }); 

 #wrapper { perspective: 1000px; } #box { width: 150px; height: 50px; background-color: red; } #btn { position: fixed; top: 0; left: 0; } 

 <div id="wrapper"> <video id="video" preload="metadata" controls> <source src="http://html5demos.com/assets/dizzy.mp4" type="video/mp4"> <source src="http://html5demos.com/assets/dizzy.webm" type="video/webm"> <source src="http://html5demos.com/assets/dizzy.ogv" type="video/ogg"> </video> <div id="box"></div> </div> <button id="btn">Click me to rotate</button> 

Answer 1

You can hide the controls with this little JavaScript:

var vid = document.getElementById(id);
vid.controls = false;

and this to make them visible again:

vid.controls = true;

I hope you can you use this workaround.