Opacity Bug in Latest Version of Chrome - CSS Transforms

Question

This bug introduced itself in Chrome only in the last couple of weeks

https://jsfiddle.net/foreyez/zbjdnete/

Basically, change the opacity to something less than 1 inside the 'grid-item' class in the css and you'll see that the sides of the 3d box disappear.

So basically change the css:

.grid-item {
    margin:5px;
    animation: float 3s ease-in-out infinite;
    position:absolute;
    float:left;
    transform-style: preserve-3d;
    width:100px;
    display:block;
    height:100px;
    background:yellow;
    opacity:0.9; /* <<<<< CHANGE THIS */
}

If the opacity is less than 1 the inner transforms inside the div disappear, any ideas what happened or workarounds?

Answer 1

I will suggest you to change your grid-item class to the following:

.grid-item {
margin:5px;
animation: float 3s ease-in-out infinite;
position:absolute;
float:left;
transform-style: preserve-3d;
width:100px;
display:block;
height:100px;
background: rgba(255, 255, 0, 0.3); 
}

Still I have no idea why the bug is reproducible on latest version of chrome but this workaround should do the trick.

Answer 2

For anyone running into this when trying to apply opacity on images layed out as grid items, the filter property comes in handy.

.grid-item {
   // other properties...
   filter: opacity(80%);
}

while not supported by ie, the overall support looks pretty good.