Chrome fixed+transform bug
HTML
<section>
<div>
<p>Am I fixed? Scroll to discover, comment css transform to fix</p>
</div>
<div>
<p>Am I fixed? Scroll to discover</p>
</div>
<div>
<p>Maybe I am fixed? Scroll to discover</p>
</div>
</section>
CSS
div{
height: 400px;
position: relative;
display: block;
overflow: hidden;
/* START comment this to see correct behavior */
/*-webkit-transform: rotate(5deg);*/
/* END comment this to see correct behavior */
}
p{
position: fixed; /* hey I said fixed!!! */
top: 20%;
width: 100%;
text-align: center;
z-index: 2;
}
div:nth-child(1){
background: red;
z-index: 5;
}
div:nth-child(2){
background: green;
z-index: 6;
}
div:nth-child(3){
background: yellow;
z-index: 7;
}