Glitches with requestFullScreen() and CSS 3D transforms

• Component: CSS
• Status: NEW ---

[Jeremy Apthorp]

When fullscreening the element that has the -webkit-transform style applied, the whole page is visible instead of just that element.

<style>
#fs-target {
	-webkit-transform: translateZ(-600px) rotateY(0deg) translateZ(600px);
}
</style>
<p>outside of target</p>
<div id="fs-target">fullscreen target</div>
<button id="snippet-fs">go fullscreen</button>

<script>
document.getElementById('snippet-fs').onclick = function(e) {
	document.querySelector('#fs-target').webkitRequestFullScreen()
};
</script>