UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36

Steps to reproduce the problem:
1 - Have a backdrop div with opacity CSS Property between 0.1 and 0.9 and a background-color value specified in hexadecimal syntax.
2 - Have a div above the backdrop containing an superior z-index value

<div class="container">
	<div class="backdrop">
	</div>
	<div class="dialog">
	</div>
</div>

Ps: - Unfortunatelly, I cannot reproduce this issue in other scenarios, but it seems to be something related with webkit's rendering, since it is solved by changing some properties with alternate (but equivelent) values.

What is the expected behavior?
Transparent dark backdrop

What went wrong?
Random glitches

Did this work before? N/A 

Chrome version: 61.0.3163.100  Channel: stable
OS Version: 10.0
Flash Version: 

When I changed the background-color from hexadecimal to RGBA syntax, the glitches disappear. 

I've also sent an issue at react-toolbox repo explaining some details of this bug, but the nature and behaviour of this suggests that is something related with the browser.  

https://github.com/react-toolbox/react-toolbox/issues/1695

Perhaps it has some relation with Chrome's 61 new feature:

"CSS color values can now be 8- and 4-digit hex colors of the format #RRGGBBAA and #RGBA"

https://blog.chromium.org/2017/08/chrome-61-beta-javascript-modules.html

Computed CSS properties for .container:

align-items:center;
box-sizing:border-box;
color:rgb(103, 106, 108);
display:flex;
font-family:Roboto, Helvetica, Arial, sans-serif;
font-size:13px;
height:734.4px;
justify-content:center;
line-height:18.5714px;
position:fixed;
text-rendering:optimizeLegibility;
text-size-adjust:100%;
top:0px;
width:1536px;
z-index:200;
-webkit-box-align:center;
-webkit-box-pack:center;
-webkit-font-smoothing:antialiased;
-webkit-tap-highlight-color:rgba(0, 0, 0, 0);

Computed CSS properties for .backdrop:

background-color:rgb(0, 0, 0);
bottom:0px;
box-sizing:border-box;
color:rgb(103, 106, 108);
display:block;
font-family:Roboto, Helvetica, Arial, sans-serif;
font-size:13px;
height:734.4px;
left:0px;
line-height:18.5714px;
opacity:0.6;
pointer-events:all;
position:fixed;
text-rendering:optimizeLegibility;
text-size-adjust:100%;
top:0px;
transition-delay:0s;
transition-duration:0.3s;
transition-property:opacity;
transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
width:1536px;
z-index:auto;
-webkit-font-smoothing:antialiased;
-webkit-tap-highlight-color:rgba(0, 0, 0, 0);

Computed CSS properties for .dialog:

background-color:rgb(255, 255, 255);
border-bottom-left-radius:2px;
border-bottom-right-radius:2px;
border-top-left-radius:2px;
border-top-right-radius:2px;
box-shadow:rgba(0, 0, 0, 0.3) 0px 19px 60px 0px, rgba(0, 0, 0, 0.22) 0px 15px 20px 0px;
box-sizing:border-box;
color:rgb(103, 106, 108);
display:flex;
flex-direction:column;
font-family:Roboto, Helvetica, Arial, sans-serif;
font-size:13px;
height:424px;
line-height:18.5714px;
max-height:705.024px;
max-width:1474.56px;
opacity:1;
text-rendering:optimizeLegibility;
text-size-adjust:100%;
transform:matrix(1, 0, 0, 1, 0, 0);
transition-delay:0.06s;
transition-duration:0.3s, 0.3s, 0.3s;
transition-property:opacity, transform, -webkit-transform;
transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1);
width:330px;
z-index:999;
-webkit-box-direction:normal;
-webkit-box-orient:vertical;
-webkit-font-smoothing:antialiased;
-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
 

Deleted: glitch.gif 1.0 MB

	glitch.gif 1.0 MB View Download

Deleted: glitch_solved.gif 691 KB

	glitch_solved.gif 691 KB View Download