title: Opacity Bug in Latest Version of Chrome - CSS Transforms
body: <p>This bug introduced itself in Chrome only in the last couple of weeks</p>
  
  <p><a href="https://jsfiddle.net/foreyez/zbjdnete/" rel="nofollow">https://jsfiddle.net/foreyez/zbjdnete/</a></p>
  
  <p>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.</p>
  
  <p>So basically change the css:</p>
  
  <pre><code>.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; /* &lt;&lt;&lt;&lt;&lt; CHANGE THIS */
  }
  </code></pre>
  
  <p>If the opacity is less than 1 the inner transforms inside the div disappear, any ideas what happened or workarounds?</p>