Strange black blocks appearing in Chrome

Question

For some reason, black boxes are displaying in random spaces in Chrome (latest build).

Some of these boxes are appearing outside of the main container, whereas some are appearing inline, covering content blocks. They appear randomly, usually after scrolling, and will often disappear when opening the inspector, hovering over elements, or scrolling down and back up.

For reference, there are some animations, box-shadows (which have been disabled with no luck), linear gradients, and position: fixed elements on the page, although this is not an issue with browsers other than Chrome.

This has been widely reported in user testing, although I have not been able to conjure up a fix. I am not sure if it is a CPU or graphics card issue, as the site is relatively lightweight and I am browsing with a new laptop with 16gb ram. My old Mac Mini, with 4gb of ram, does not produce this issue.

Any pointers would be most appreciated.

Solution 1

Update: This was a bug in Chrome and was fixed: https://code.google.com/p/chromium/issues/detail?id=142038

eddz filed the issue at crbug.com/new and over 40 people starred the ticket to follow along. It led to a few separate fixes in Chrome by the engineering team.

Solution 2

I had this issue with a website that was using transformZ (0) to force GPU rendering. When I removed this style the issue disappeared

Solution 3

This isn't an answer, but if you are able to somehow reproduce it maybe later on down the road:

Make a copy of the page locally, or anywhere, set the base href to the main domain, now start removing css links and js scripts from the bottom to the top until you don't experience the behaviour anymore, if you get to that point then the last script/stylesheet you removed is the culprit.

If you find the culprit file, now try finding the culprit line/section.

If you don't get to that point, it may be the browser, but it doesn't sound like it is.

It may also be linked between scripts/stylesheets and/or accidentally inherited.

Comments

[eddz]

Thanks, meder. I'll give this a try if nobody else recognises this issue and report back.

[Paul Irish]

When you file, paste the contents of about:gpu into the report.

[eddz]

Thanks, Paul. This has been filed at code.google.com/p/chromium/issues/detail?id=142038

[Rantiev]

It's exactly something about CSS3 transforms. Also chrome crashhed sometimes on my laptop. When i trying to use CSS3 transitions, animations or transforms.

[Lior Elrom]

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post.

[Paul Irish]

@Lior the proper answer to this question is that StackOverflow is not where to report browser bugs. Browser engineers are not browsing SO looking for bugs. Luckily, eddz did indeed post a ticket and led to a very productive discussion with other folks concerned with this issue.

[user3364730]

@PaulIrish ... I noticed this problem is happening again. I will file GPU contents into the report