Html Chrome中出现奇怪的黑块

Strange black blocks appearing in Chrome

提问by eddz

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

出于某种原因，黑框显示在 Chrome（最新版本）中的随机空间中。

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.

作为参考，有一些动画、框阴影（在没有运气的情况下已被禁用）、线性渐变和位置：页面上的固定元素，尽管这不是 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.

这已在用户测试中得到广泛报道，尽管我还没有想出解决办法。我不确定这是 CPU 还是显卡问题，因为该站点相对较轻，而且我正在使用带有 16gb 内存的新笔记本电脑浏览。我的旧 Mac Mini 有 4GB 内存，没有出现这个问题。

Any pointers would be most appreciated.

任何指针将不胜感激。

采纳答案by Paul Irish

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

更新：这是 Chrome 中的一个错误并已修复：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.

eddz 在 crbug.com/new 上提交了这个问题，超过 40 人为这张票加注了星号。这导致工程团队在 Chrome 中进行了一些单独的修复。

回答by Ben Gannaway

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

我在一个transformZ (0)用于强制 GPU 渲染的网站上遇到了这个问题。当我删除此样式时，问题就消失了

回答by meder omuraliev

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.

在本地或任何地方复制页面，将基本 href 设置为主域，现在开始从底部到顶部删除 css 链接和 js 脚本，直到您不再遇到这种行为，如果你到了那个点那么您删除的最后一个脚本/样式表就是罪魁祸首。

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

如果您找到罪魁祸首文件，现在尝试查找罪魁祸首行/部分。

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

如果你还没有达到那个点，它可能是浏览器，但听起来不像。

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

它也可能在脚本/样式表之间链接和/或意外继承。

回答by Rantiev

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.

现在我们开始使用transformX-Y，可能在某些地方Z也是。我们有这个地狱块。

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

Chrome 中的转换 + 过渡动画似乎有问题。一次动画太多块时可能会出现此错误吗？

FF works fine.

FF 工作正常。

回答by Kacy

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.

我遇到了这些相同的盒子。对我来说，问题在于我使用的是 mp4 视频，而这些视频在 chrome 中已被弃用，而不是 webm 视频。