CSS滤镜属性在Google Chrome上无法正常工作，但在Mozilla Firefox上完美运行

Question

我正在制作一个网站，更具体地说是一个网店，我使用了CSS滤镜属性来模糊图像，所以当我悬停在图像上时，图像会变模糊，并出现一段文本。我的问题是，在Mozilla浏览器中，过渡效果非常好，但在Google Chrome中有些不流畅。我在我的网站设计中使用了CSS网格布局。

我不知道如何解决这个问题，是否有任何解决方案。

以下是HTML和CSS代码。

   

 .bigPicture{
     display:inline-block;
     position:relative;
    }
    .blur{
     position:absolute;
     top:45%;
     color:white;
     opacity:0;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
     -webkit-transition:all 0.5s ease;
     transition:all 0.5s ease;
     right:33%;
    }
    .contentPicture{
     -webkit-transition:all 0.5s ease;
     transition:all 0.5s ease;
    }
    .bigPicture:hover img{
     -webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
        filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="5" /></filter></svg>#filter');
        filter: blur(5px);
    }
    .bigPicture:hover .blur{
     opacity:1;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }

    <div class="bigPicture">
      <a href="#">
       <div><img class="contentPicture" src="https://www.w3schools.com/css/trolltunga.jpg" height=300 width=100%></div>
       <div class="blur"><h1>Započnite kupovinu</h1></div>
      </a>
     </div>
    

您可以看到，当您悬停在图像上并且使用Google Chrome来阅读我的问题时，您会发现图像出现了移动，但是如果您在Mozilla中进行相同操作，则一切正常。如果有人能够回答我的问题，那将非常美妙。谢谢。

- Matija Vasko

---

我目前也遇到了同样的问题，这似乎是在使用filter属性时Chrome（版本65.0）中的一个“新”错误。每个获得过滤器的容器都会以完全奇怪的方式被扭曲。而且无论你选择什么过滤器，投影、模糊等，它们都会导致相同奇怪的扭曲容器。 - LeaveAirykson

Answer 1

我也遇到了同样的问题。尝试使用新的 Google 网站，它可以正常工作。很可能是旧网站不支持此功能。

- Dan

---

这段回答含义模糊，更适合作为评论而非答案。 - TylerH