Question

我开始认为这是Chrome中的一个错误，因为safari没有问题，我已经搜索了SO寻找解决方案并且没有想出一个解决方案。

问题在于，当应用css滤镜模糊然后剪切边缘时，如果您尝试转换该div，它将暂时显示模糊边缘，即使您已经将内部div缩放过滤镜模糊

查看我的示例并点击图片（查看图片边缘）：http://codepen.io/anon/pen/MYqbmJ

这里有什么想法吗？

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);   
}

Answer 1

您可以尝试通过考虑伪元素来分离滤波器和变换。它似乎可以在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>

Answer 2

绝对明白你的意思！看起来Chrome中有一个小错误。我唯一能想到的是使用媒体的小黑客。

@media (max-width:55rem) {#background{-webkit-filter: blur(10px);filter: blur(10px);}}

这将捕获55em的窗口分辨率（基于页面集大小）并在该媒体括号内启动CSS样式。

还要考虑使用折旧/非WebKit样式。有时候，我注意到，这样做我的造型比混合的更好。

希望这会有所帮助：）

Answer 3

我修复了背景图片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。

希望获得帮助。

Div3与CSS3模糊滤镜在转换时显示模糊边缘

3 个答案: