css缩放变换和滤镜模糊的问题答案

【问题标题】：Problem with css scale transform and filter blurcss缩放变换和滤镜模糊的问题
【发布时间】：2019-11-03 01:39:28
【问题描述】：

我在结合两个属性时在 Chrome 浏览器上遇到问题：filter: blur(15px) 和 transform: scale3d(1.2,1.2,1)。

我有两张图片，一张在一张。更高层上的图像模糊，但是当我应用该过滤器时它的边缘变得透明，所以我将overflow:hidden 添加到父 div，并按比例放大图像。我希望只看到图像的不透明部分。

它在 Firefox 和 Opera 上可以正常工作，但在 Chrome 和 MS Edge 浏览器上却不行。如何解决这个问题？

#images-box{
  position: relative;
  width: 500px;
  height: 280px;
  overflow:hidden;
}

.image{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://images.unsplash.com/photo-1558389157-a986a38f3431?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80');
  background-size: cover;
  background-position: 50% 50%;
}
.image.blured{
  -webkit-filter: blur(14px);
  filter: blur(14px);
  z-index: 2;
  -webkit-transform: scale3d(1.2,1.2,1);
  transform: scale3d(1.2,1.2,1);
}

<div id="images-box">
  <div class="image"></div>
  <div class="image blured"></div>
</div>

【问题讨论】：

在 Chrome 版本 74.0.3729.157 上看起来不错。我没有看到任何透明边缘。
屏幕是在 Chrome 75.0.3770.100 上制作的。可能是浏览器的错误。
在版本 74.0.3729.169 OSX 中按预期工作。

标签： html css css-transforms css-filters

【解决方案1】：

将 scale3d(1.2,1.2,1) 更改为 scale(1.2) 在 Chrome 86.0.4240.198 上帮助了我。

【讨论】：