我开始认为这是Chrome中的错误，因为Safari浏览器没有问题，因此我一直在SO中寻找解决方案，但没有提出解决方案。
问题是，当应用css滤镜模糊并修剪边缘时，如果尝试过渡该div，即使您将内部div缩放到滤镜模糊之外，它也会瞬间显示模糊边缘。
查看我的示例并单击图像（查看图像边缘）：http://codepen.io/anon/pen/MYqbmJ
这里有什么想法吗？
$('#background').on('click', function() {
$(this).toggleClass('ready');
});body,
html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
#container {
width: 100%;
height: 100%;
position: relative;
}
#background {
background-image: url(http://zurb.com/playground/uploads/upload/upload/332/220px-BlurParklife.jpg);
-webkit-background-size: contain;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
left: -35px;
right: -35px;
top: -35px;
bottom: -35px;
-webkit-filter: blur(15px);
position: absolute;
transition: transform 300ms ease-in-out;
transform: scale(1.1);
}
#background.ready {
transform: scale(2);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="background"></div>
</div>您可以通过考虑伪元素来尝试分离滤波器和变换。它似乎可以在Chrome中正确呈现]
$('#background').on('click', function() {
$(this).toggleClass('ready');
});body,
html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
#container {
width: 100%;
height: 100%;
position: relative;
}
#background {
background-image: url(https://zurb.com/playground/uploads/upload/upload/332/220px-BlurParklife.jpg);
background-size: 0 0;
left: -35px;
right: -35px;
top: -35px;
bottom: -35px;
position: absolute;
transition: transform 300ms ease-in-out;
transform: scale(1.1);
}
#background:before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background-image:inherit;
background-size:cover;
filter: blur(15px);
}
#background.ready {
transform: scale(2);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="background"></div>
</div>我修复了背景图像blur transition问题。 Pen is here。 Chrome浏览器在backface-visibility中出现错误。
您必须像这样更改#background属性。
#background {
background-image:url(https://zurb.com/playground/uploads/upload/upload/332/220px-BlurParklife.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
left:-35px;
right:-35px;
top:-35px;
bottom:-35px;
-webkit-filter: blur(15px);
position: absolute;
transition: transform 0.3s ease-in-out 0s; /* Before it was transition: transform 300ms ease-in-out */
transform: scale(1.1);
-webkit-backface-visibility: hidden; /* You have to remove Backface Visibility from -webkit browser */
}
您必须使用CSS Prefixer来支持所有浏览器。代码在下面。
#background {
background-attachment: scroll;
background-color: transparent;
background-image: url(https://zurb.com/playground/uploads/upload/upload/332/220px-BlurParklife.jpg);
background-position: left top;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
left:-35px;
right:-35px;
top:-35px;
bottom:-35px;
-webkit-filter: blur(15px);
filter: blur(15px);
position: absolute;
-webkit-transition: -webkit-transform 0.3s ease-in-out 0s;
transition: -webkit-transform 0.3s ease-in-out 0s;
-o-transition: -o-transform 0.3s ease-in-out 0s;
-moz-transition: transform 0.3s ease-in-out 0s, -moz-transform 0.3s ease-in-out 0s;
transition: transform 0.3s ease-in-out 0s;
transition: transform 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s, -moz-transform 0.3s ease-in-out 0s, -o-transform 0.3s ease-in-out 0s;
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
#background.ready {
-webkit-transform: scale(2);
-moz-transform: scale(2);
-ms-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
}
注：我使用transition属性transform 0.3s ease-in-out 0s而不是transform 300ms ease-in-out。有时，我看到如果使用300ms，Chrome浏览器会立即显示模糊边缘。如果合适，可以使用transform 300ms ease-in-out。
希望获得帮助。
绝对明白你的意思！看起来Chrome中有一个小错误。我唯一想到的就是使用媒体的小技巧。
@media (max-width:55rem) {#background{-webkit-filter: blur(10px);filter: blur(10px);}}
这将以55em捕获窗口分辨率（基于页面设置大小，并在该媒体支架内启动css样式。
也请考虑使用已折旧/非WebKit的样式。有时，我已经注意到，这样做可以比混合样式获得更好的结果。
希望这会有所帮助：）