内容可见性和溢出冲突

Question

我需要content-visibility:auto，因为页面加载性能更好
但按钮有一半在父级之外，如果content-visibility是auto，则不可见
知道吗？

.wrap{
width:50%;
height:54px;
position:relative;
background:orange;
content-visibility:auto;
overflow:visible;
}
button{
position:absolute;
right:-20px;
top:20px;
}

<div class='wrap'>
<button>CLICK</button>
</div>

Answer 1

内容可见性似乎尚未在Firefox或Safari上实现。

请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility

因此，结果在这些浏览器上"看起来不错"，因为CSS属性设置被忽略了。

在Edge/Chrome上，似乎有人试图实现contentIvisibility，但我不明白为什么这意味着按钮在其父元素之外被切断。

所以这并不是一个完整的解释——希望有人能添加更多关于这个CSS属性如何工作的信息。