UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36

Example URL:
https://codepen.io/kosamari/pen/xXjxzw

Steps to reproduce the problem:
1. Create many SVG rect elements with fill color.
2. Apply opacity to each rect
3. Trigger paint in the page (i.e scroll)

Please see reduced test case here : https://codepen.io/kosamari/pen/xXjxzw

What is the expected behavior?
Rectangles display with slightly opaque color of its fill color & does not glitch when paint is happening in the page.

What went wrong?
- when opacity is applied, it does not display collect color.
- paint is triggered in the page, SVG graphics "glitch"
Please see screen recording for glitch behavior: https://youtu.be/TVs1r9kLEDo

Note: This issue is spotted on MacOS with hardware acceleration enabled. When hardware acceleration is turned off, the issue does not appear. 

(This issue was firs spotted on Github's contribution graph.)

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 61.0.3163.100  Channel: stable
OS Version: OS X 10.12.6
Flash Version: Shockwave Flash 27.0 r0