带有 CSS3 模糊滤镜的 Div 在过渡时显示模糊的边缘

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 中正确呈现

 $('#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

我修复了背景图像blur transition问题。 笔在这里。 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 。 有时我看到 Chrome 浏览器在使用300ms暂时显示模糊边缘。 如果适合您，您可以使用transform 300ms ease-in-out 。

希望这有帮助。

Answer 3

绝对明白你的意思！ 看起来Chrome中存在一个小错误。 我唯一能想到的就是使用媒体进行一些小技巧。

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

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

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

希望这可以帮助 ：）