Div 和 CSS3 模糊滤镜在过渡时显示模糊边缘

Question

我开始认为这是 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>

Answer 1

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

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

这将捕获 55em 处的 window 分辨率（基于页面集大小）并在该媒体支架内启动 css 样式。

还可以考虑使用 depreciated/non-WebKit 样式。有时，我注意到，在我的造型中，这样做比混合效果更好。

希望这对您有所帮助:)

Answer 2

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

我修复了背景图片 blur transition 问题。 Pen is here. Chrome browser get error in 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 前缀来支持所有浏览器。代码如下。

#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。有时我看到 Chrome 浏览器在使用 300ms 时会暂时显示模糊边缘。如果适合您，您可以使用 transform 300ms ease-in-out。

Hope this help.

Div 和 CSS3 模糊滤镜在过渡时显示模糊边缘

Div with CSS3 Blur Filter Shows Blurred Edges on Transition

css

css-transforms

css-filters