Skip to content

Instantly share code, notes, and snippets.

@desandro
Created February 20, 2012 19:22
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save desandro/1870864 to your computer and use it in GitHub Desktop.
Chrome 3d compositing bug
/**
* 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; }
<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>
{"view":"split-vertical","prefixfree":"","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment