我应该认为作为背后的内容backdropped
元素移动时,元素的背景颜色会适应,看起来就像内容透过它发光一样。在这个例子中,情况并非如此:
怎么了?在 Safari 12.0.3、macOS Mojave 10.14.3 上进行了测试。
.container {
width: 100%;
height: 150px;
overflow-y: scroll;
}
.block {
height: 50px;
margin: 10px;
}
.block:nth-child(1) {
margin-top: 30px;
background-color: red;
}
.block:nth-child(2) {
background-color: green;
}
.block:nth-child(3) {
background-color: blue;
}
.glass {
position: absolute;
background-color: rgba(255, 255, 255, 0.3);
top: 0;
width: 25%;
border: 1px solid black;
height: 100%;
}
.clear {
left: 55%;
}
.frosted {
left: 20%;
background-color: rgba(255, 255, 255, 0.5);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
<div id="app">
<div class="container">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="glass clear"></div>
<div class="glass frosted"></div>
</div>
</div>
我注意到了DID在我缩小屏幕并滚动页面后为我刷新。但滚动示例时没有更新(无论屏幕尺寸如何)
所以看来是油漆造成了问题,而不是实施。这也让我怀疑设备功能是否可能存在部分问题。我使用的是 13 英寸 2017 MBP,因此没有独立 GPU。
您是否尝试过强制 GPU 加速?为此,将其添加到元素中:
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
Safari 似乎仍然有问题translateZ(0)
所以用上面的代替。
Edit:以上似乎并没有解决问题。考虑添加will-change
(docs)因为 Safari 支持这一点。不确定过滤器是否是有效的更改对象,但我相信可以使用“滚动位置”。我应该指出,这是一个核选项,所以要小心.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)