public
Created

Chrome 3d compositing bug

  • Download Gist
dabblet.css
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
/**
* Chrome 3d compositing bug
*/
 
 
body { font-family: sans-serif; }
.env {
-webkit-perspective: 500px;
width: 500px;
height: 400px;
border: 2px dotted;
position: relative;
margin-bottom: 1.0em;
}
figure { margin: 0; }
img { display: block; z-index: 1; }
.env > * {
background: hsla( 0, 100%, 50%, 0.5 );
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
border: 10px solid blue;
}
.env > *:nth-child(1) { -webkit-transform: translate3d( 0px, 0, -100px ) ; }
.env > *:nth-child(2) { -webkit-transform: translate3d( 100px, 0, -200px ) ; }
.env > *:nth-child(3) { -webkit-transform: translate3d( 200px, 0, -300px ) ; }
.env > *:nth-child(4) { -webkit-transform: translate3d( 300px, 0, -400px ) ; }
.env > *:nth-child(5) { -webkit-transform: translate3d( 400px, 0, -500px ) ; }
.env:hover { border-color: orange; }
.env:hover img { opacity: 0.999; }
dabblet.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
<h1>Chrome 3d compositing bug</h1>
 
<p>hover over box to set opacity: 0.999 on images</p>
 
<div class="env">
<img src="http://farm5.staticflickr.com/4119/4858565412_483fc5822c.jpg" />
<img src="http://farm5.staticflickr.com/4119/4858565412_483fc5822c.jpg" />
<img src="http://farm5.staticflickr.com/4119/4858565412_483fc5822c.jpg" />
<img src="http://farm5.staticflickr.com/4119/4858565412_483fc5822c.jpg" />
<img src="http://farm5.staticflickr.com/4119/4858565412_483fc5822c.jpg" />
</div>
 
<div class="env">
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
</div>
settings.json
JSON
1
{"view":"split-vertical","prefixfree":"","page":"css"}

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.