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: 
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.
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](https://caniuse.com/#search=filter) looks pretty good.