19

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.

enter image description here

enter image description here

eddz
  • 583
  • 1
  • 6
  • 22
  • Can we see some code? Or is this happening on external websites? – Erty Seidohl Aug 09 '12 at 22:14
  • @Jawad This version of Chrome is 21.0.1180.75 (non-beta). – eddz Aug 09 '12 at 22:17
  • @Erty – really wish I could put up some code, but I'm not permitted to do so :\ I'm hoping this will look familiar to somebody, as it seems to be a rendering issue confined to Chrome. – eddz Aug 09 '12 at 22:20
  • Than there must be something in the HTML markup or CSS that is same for all the "Black Boxes". Any chance of HTML and CSS for it? Also are you using a valid DOCTYPE? – Jawad Aug 09 '12 at 22:21
  • @Jawad – the doctype is simply . Do you think that using an older doctype could fix this? The black boxes are also appearing outside of the container, where there are no elements. In the second screenshot, you can see

    s which are partially obscured – there are no child elements in here – just partially-obscured lines of text.

     – eddz Aug 09 '12 at 22:25
  • "Do you think that using an older doctype could fix this?" - Not at all. I was just making sure that the pages were not loading in quirks mode. As long as they are rendering in compliance/standard mode, the DOCTYPE should not be an issue. Also you should check for the online W3C Validator to rule out that as well. Other than that we really need the HTML & CSS to reproduce the problem and get back to you with confidenance. – Jawad Aug 09 '12 at 23:18
  • For me, the fix was to disable GPU acceleration for rendering 2D texts in about:flags menu. I face many issues with my NVIDIA card driver. So, I blame it on NVIDIA driver people. – Salil Mar 06 '17 at 21:49

6 Answers6

3

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.

Paul Irish
  • 47,354
  • 22
  • 98
  • 132
  • When you file, paste the contents of about:gpu into the report. – Paul Irish Aug 10 '12 at 19:06
  • 1
    Thanks, Paul. This has been filed at https://code.google.com/p/chromium/issues/detail?id=142038 – eddz Aug 11 '12 at 00:02
  • This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. – Lior Elrom Oct 24 '15 at 04:24
  • @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. – Paul Irish Oct 25 '15 at 05:02
  • 1
    @PaulIrish ... I noticed this problem is happening again. I will file GPU contents into the report – user3364730 Oct 27 '15 at 16:06
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

Zoltan Toth
  • 46,981
  • 12
  • 120
  • 134
Ben Gannaway
  • 1,053
  • 1
  • 14
  • 28
1

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.

meder omuraliev
  • 183,342
  • 71
  • 393
  • 434
  • Thanks, meder. I'll give this a try if nobody else recognises this issue and report back. – eddz Aug 10 '12 at 00:18
0

We had experienced this weird blocks too on our website. In past we was using transitions, transitions was reproducing another bug "weird lines" randomly appeared on page and dissapear during scroll.

Now we start using transformX-Y, may be in some places Z too. And we have got this hell bloack blocks.

It seems something wrong in Chrome with transfom + transition animations. May be this bug appear when too much blocks animated at one time?

FF works fine.

Rantiev
  • 2,121
  • 2
  • 32
  • 56
  • It's exactly something about CSS3 transforms. Also chrome crashhed sometimes on my laptop. When i trying to use CSS3 transitions, animations or transforms. – Rantiev Sep 25 '12 at 17:06
0

I encountered these same boxes. For me, the problem was that I was using mp4 videos, which are deprecated in chrome, instead of webm videos.

Kacy
  • 3,330
  • 4
  • 29
  • 57
0

I think is related to the GPU I had the same issue on my website. And it stopped happening when I turned on the Metal Rendering flag.

My website renders back bgs randomly while scrolling. It is really heavy on videos and animations and looks like chrome has so little GPU available that graphic intensive website doesn't work correctly on blink. I noticed that when chrome used webkit those issues didn't happen.

I this is a blink render issue.

Luis Krötz
  • 1