硬件加速时在 Chrome 中剪辑时 CSS 模糊渲染不正确答案

【问题标题】：Incorrect CSS Blur Rendering When Clipped in Chrome When Hardware Accelerated硬件加速时在 Chrome 中剪辑时 CSS 模糊渲染不正确
【发布时间】：2016-04-08 16:10:39
【问题描述】：

我在 Chrome 上遇到了filter: blur() 的问题。我使用transform: translate3d(0, 0, 0) 来鼓励硬件加速，并且它大大提高了性能（我很少使用它）。我有一个元素，我已将其 before 设置为具有背景图像和模糊效果。我已将其范围设置为超出其包含元素的范围。

以上是 Chrome 中发生的情况的屏幕截图。左侧是硬件加速版本，右侧是非硬件加速版本。请注意，在左侧，模糊看起来带有柔和的边缘。

似乎在 Chrome 中，当硬件加速时，元素在被模糊之前被溢出剪辑，导致边缘羽化。

除了禁用硬件加速（这种大半径模糊会降低性能）之外，还有其他方法可以鼓励 Chrome 在剪辑之前执行模糊处理吗？

我在下面附上了一个示例测试用例。

谢谢！

      div {
        width: 200px;
        height: 200px;
        position: absolute;
        box-sizing: border-box;

        overflow: hidden;
        border: 2px solid red;
      }

      div::before {
        background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg/1024px-Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg);
        content: "";
        display: block;
        position: absolute;
        left: -200px;
        top: -200px;
        width: calc(100% + 400px);
        height: calc(100% + 400px);
        background-size: calc(100% + 400px) calc(100% + 400px);

        filter: blur(60px);
        -webkit-filter: blur(60px);
        z-index: 1;
      }

      #incorrect::before {
        -webkit-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }

      #incorrect {
        left: 100px;
        top: 100px;
      }

      #correct {
        right: 100px;
        top: 100px;
      }

<html>
  <body>
    <div id="incorrect"></div>
    <div id="correct"></div>
  </body>
</html>

【问题讨论】：

将transform 移动到#incorrect 似乎可以解决问题，但它是硬件加速的吗？
实际结果不同的事实真的很有趣。
这似乎仍然是 6 年后的问题。我在 chromium 错误跟踪器中提出了一个问题，希望它会在未来得到修复：bugs.chromium.org/p/chromium/issues/detail?id=1294410

标签： css google-chrome css-transforms css-filters

【解决方案1】：

您可以尝试将#incorrect::before 上的最后一个属性“translation-value-z”设置为 1。我不知道为什么，但它似乎有效。

Translation-value-z 是第三个向量值，定义了沿 z 轴方向（第 3 维）平移。注意力：只能是长度值，不支持百分比。

      div {
        width: 200px;
        height: 200px;
        position: absolute;
        box-sizing: border-box;

        overflow: hidden;
        border: 2px solid red;
      }

      div::before {
        background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg/1024px-Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg);
        content: "";
        display: block;
        position: absolute;
        left: -200px;
        top: -200px;
        width: calc(100% + 400px);
        height: calc(100% + 400px);
        background-size: calc(100% + 400px) calc(100% + 400px);

        filter: blur(60px);
        -webkit-filter: blur(60px);
        z-index: 1;
      }

      #incorrect::before {
        -webkit-transform: translate3d(0, 0, 1);
        -ms-transform: translate3d(0, 0, 1);
        transform: translate3d(0, 0, 1);
      }

      #incorrect {
        left: 100px;
        top: 100px;
      }

      #correct {
        right: 100px;
        top: 100px;
      }

<html>
  <body>
    <div id="incorrect"></div>
    <div id="correct"></div>
  </body>
</html>

【讨论】：

将 z 轴设置为 1 会停止强制元素进行硬件加速，因此这实际上并不能解决问题