CSS Filter Eigenschaft funktioniert nicht richtig auf Google Chrome, funktioniert aber perfekt auf Mozilla Firefox

Question

Ich mache eine Website, um genauer zu sein ein Webshop und ich verwendete eine CSS-Filter-Eigenschaft für das Verwischen eines Bildes, also wenn ich den Mauszeiger über die Bild das Bild verwischt und ein Text erscheint. Das Problem, das ich habe ist, dass der Übergang sehr schön und glatt auf Mozilla funktioniert, aber auf Google Chrome ist es irgendwie abgewetzt. Ich benutze CSS-Raster für meine Website-Design.

Ich weiß nicht, wie das zu beheben ist und gibt es irgendwelche Lösungen dafür.

Hier ist der HTML- und CSS-Code.

 

 
.bigPicture{ 
 
    \t display:inline-block; 
 
    \t position:relative; 
 
    } 
 
    .blur{ 
 
    \t position:absolute; 
 
    \t top:45%; 
 
    \t color:white; 
 
    \t opacity:0; 
 
    \t -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
 
    \t -webkit-transition:all 0.5s ease; 
 
    \t transition:all 0.5s ease; 
 
    \t right:33%; 
 
    } 
 
    .contentPicture{ 
 
    \t -webkit-transition:all 0.5s ease; 
 
    \t transition:all 0.5s ease; 
 
    } 
 
    .bigPicture:hover img{ 
 
    \t -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{ 
 
    \t opacity:1; 
 
    \t -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
 
    }

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

Wie Sie sehen können, wenn Sie auf das Bild schweben, und wenn Sie Google Chrome verwenden, meine Frage zu lesen können Sie sehen, dass das Bild bewegt, aber wenn Sie das tun, in mozilla es funktioniert perfekt. Wenn mir jemand antworten kann, wäre das schön. Danke.

Answer 1

Hatte das gleiche Problem. Versuchte die neue Google-Website und es funktionierte wie beabsichtigt. Es war wahrscheinlich nur die alte Seite, die es nicht unterstützt.