元素闪烁，仅限 Chrome，仅限背景混合模式答案

【问题标题】：Flickering on elements, Chrome only, with background-blend-mode only元素闪烁，仅限 Chrome，仅限背景混合模式
【发布时间】：2017-11-10 01:04:09
【问题描述】：

我们运营的网站 www.desirio.com 在身体上使用背景图像

background-blend-mode: luminosity

在 Chrome 中，当您将鼠标悬停在元素上时，您会看到奇怪的白线在“某处”随机闪烁。当您删除 bg-blend-mode 时（如果您使用调试器尝试，请注意将其删除两次，因为它在主体上的 CSS-rules 中存在两次），闪烁消失了。

看起来像这样：

我们在 OSX 上运行 Chrome 62，但在其他版本上也看到了这种情况。

【问题讨论】：

【解决方案1】：

Chrome 无法在较大的容器（例如

）上应用背景混合模式

<body>

把 if off 放到你的 hero-section

.hero-section{
    background-blend-mode: luminosity;
}

【讨论】：

但是英雄部分并没有给我们的身体带来这种效果，当然，因为它是一个小得多的容器？那么我们为什么要把它“移动”到那里呢，它根本不会产生影响，也不是我们目前肯定拥有的那种。