<!DOCTYPE html> | |
<html> | |
<head> | |
<style> | |
body { | |
margin: 0; | |
height: 1000px; | |
} | |
body > div { | |
outline: 1px solid black; | |
} | |
.box { | |
width: 100px; | |
height: 100px; | |
} | |
.fixed { | |
position: fixed; | |
top: 100px; | |
background-color: green; | |
} | |
.perspective { | |
-webkit-perspective: 500px; | |
} | |
.transformed { | |
-webkit-transform: translateZ(1px); | |
} | |
</style> | |
<script> | |
// Scroll on load to test fixed positioning. | |
window.addEventListener('load', function() { | |
window.scrollTo(0, 100); | |
}, false) | |
</script> | |
</head> | |
<body> | |
<div class="perspective box" style="margin: 150px 50px;"> | |
<div class="fixed box"> | |
<div class="transformed box"></div> <!-- Necessary to activate preserve3d compositing --> | |
</div> | |
</div> | |
<div class="perspective fixed box" style="left: 250px;"> | |
<div class="transformed box"></div> <!-- Necessary to activate preserve3d compositing --> | |
</div> | |
</body> | |
</html> |