我在页面底部有一个固定位置的元素
bottom: 0
背景颜色为
black
。这是一个导航元素,后面有滚动的东西。
我试着用
backdrop-filter: blur(20px)
所以我需要改变不透明度
background-color
:
rgba(18,18,18,0.3)
.
当我添加过滤器更改时,固定元件会上升
1px
,这意味着我可以看到页面底部滚动的一个像素。
为什么会这样?
我该怎么做才能防止/解决这个问题?
提前感谢!
.myDialog {
padding: 5px 10px;
background-color: rgba(255,255,255,0.4);
backdrop-filter: blur(20px);
position: fixed;
bottom: 0;
}
body {
background: green;
}
<div class="myDialog">
I don't disappear when you scroll!
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>aksldjnaskjdnaksjdnakjsdnakjnsdkajsndakjsndkajsndkjasndkjasndkjandkjanskdjnaskdjnaskjdnakjsdnakjsndkajndkjasndkjansd<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
(有一段文本,当你滚动浏览时,你会在固定框后面看到它)。
https://jsfiddle.net/379heofx/2/
(以防上面的代码没有显示,这让我更加困惑)
问题截图:
