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

Example URL:
https://cloud.google.com/sdk/downloads

Steps to reproduce the problem:
1. open site
2. see the blue line appear crossing over the header
3. scroll page
4. see the line shift around as elements are repositioned and resized

What is the expected behavior?
The seam between the two triangles should not be visible on a render layer.

What went wrong?
I'm assuming that there's a problem aligning the two triangles within the layer rectangle, which causes the antialiased edges to allow the background to bleed through. It could also be that the antialiasing method doesn't blend the two edges seamlessly.

I've attached a GIF to illustrate the problem. I've enabled the Dev Tools "show render layers" option, but turning it off does not solve the problem.

I also see the same problem present itself in table cells (attached shot). The lines appear in different cells if I reflow the content by resizing the window.

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? Yes I don't know.

Does this work in other browsers? Yes

Chrome version: 57.0.2987.133  Channel: stable
OS Version: 10.0
Flash Version: none
 

Deleted: screen-1.gif 1023 KB

	screen-1.gif 1023 KB View Download

Deleted: screen-2.png 21.7 KB

	screen-2.png 21.7 KB View Download