New issue
Advanced search Search tips
Starred by 2 users

Issue metadata

Status: Duplicate
Merged: issue 633805
Owner: ----
Closed: Oct 2016
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 2
Type: Bug

Sign in to add a comment

Issue 653643: Rectangular graphic glitch on solid backgrounds

Reported by, Oct 6 2016

Issue description

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

Example URL:

Steps to reproduce the problem:
1. Visit
2. See the rectangular glitches on the green background

What is the expected behavior?

What went wrong?
The specified solid background contains visual artefacts (squares of a darker color than the background), that shouldn't be there. It also occurred on another website I was developing, but only noticed it is more common after seeing it on the given website as well.

Neither the CSS nor the HTML do specify this behaviour (there are no CSS declaration, nor other elements that could cause this).

The glitch pattern changes with website layout and browser size, please see my attachment in case reproduction fails

Does it occur on multiple sites: Yes

Is it a problem with a plugin? N/A 

Did this work before? N/A 

Does this work in other browsers? Yes 

Chrome version: 53.0.2785.143  Channel: stable
OS Version: OS X 10.12.0
Flash Version: Shockwave Flash 23.0 r0
57.1 KB View Download

Comment 1 by, Oct 7 2016

Components: -Blink Blink>Paint
I personally can't reproduce this but I don't have the exact environment. Sending to paint team.

Comment 2 by, Oct 8 2016

Thank you for posting this.  I've been troubleshooting this on our site.

This seems indeed to be a bug in Chrome, and get the same results, and ONLY in Chrome, and ONLY on my machines running OS X Sierra.

I've never posted here before. If there's anything I can add (environment details), let me know.

Comment 3 by, Oct 8 2016

PS, my Chrome and OS versions are the same as yours.

Comment 4 by, Oct 9 2016

I've just run into this error too. It's readily reproducible on both Chrome 53.0.2785.143 and Canary 56.0.2885.0 on macOS sierra.

Attached is a trivial test case (bug_653643.html) that demonstrates the problem. If the window is large enough, (520px square was large enough when I tested) a lighter pink square can be observed on the slightly darker pink background. Since both html and body have the same background color, the page should be a consistent color. The darker pink outside the box is the correct shade, according to the macOS color platette's eyedropper.

More interestingly, if you remove the background color from either the html or the body element, the page color is consistently the lighter, incorrect shade of pink.

A similar problem can also be observed withough putting the same shade of background color on two elements: see bug_653643_2.html, in which the black square sits inside of square of the correct color but the rest of the page is colored in the lighter shade of pink.

(Apologies for the bright pink... it was the first color I landed on after changing it from blue where it's harder to see the contrast!)
113 bytes View Download
154 bytes View Download

Comment 5 by, Oct 10 2016

We are having the same issue. On Sierra and only happens on Chrome.
Screen Shot 2016-10-10 at 8.43.23 AM.png
562 KB View Download

Comment 6 by, Oct 10 2016

Need to get a computer with Sierra on it to test...

Comment 7 by, Oct 10 2016

Mergedinto: 633805
Status: Duplicate (was: Unconfirmed)

Comment 8 by, Oct 12 2016

Same issue on every Electron based apps.

Comment 9 by, Oct 12 2016

Also with Opera, Vivaldi, Blisk browsers..

Comment 10 by, Oct 12 2016

This is fixed by setting #enable-gpu-rasterization flag to "Force-enabled for all layers."

Comment 11 by, Oct 12 2016

astorino.mattia, please add comments to the duped bug ( instead of here. In any case, it looks like this has since been fixed.

Sign in to add a comment