Chrome Version       : 54.0.2840.98 (64-bit)
URLs (if applicable) : https://jsfiddle.net/j1w40Lx0/3/
Other browsers tested:
  Add OK or FAIL, along with the version, after other browsers where you
have tested this issue:
     Safari: OK Version 9.1.2 (11601.7.7)
    Firefox: OK 49.0.2

What steps will reproduce the problem?
(1) Go to the provided URL (https://jsfiddle.net/j1w40Lx0/3/)

What is the expected result?
There are two boxes, call them box 1 and 2, each having 1 child box. Both boxes have opacity set to 0.5. The only difference is box 2's child box is being animated to rotate by using `transform` property. Both box 1 and 2's opacity should look identical.

What happens instead?
Box 1 and 2 appears different. In fact, box 2 (the one with rotated child box) is fainter than box 1 as long as its child box is animating. Once animation stops both boxes look identical as they should. This bug only happens when opacity is set using CSS `opacity` property. The bug doesn't happen when opacity is set using the `filter` property.

Screenshot attached.



 

Deleted: Screen Shot 2016-11-23 at 4.44.08 PM.png 23.9 KB

	Screen Shot 2016-11-23 at 4.44.08 PM.png 23.9 KB View Download