仅在 Chrome 上修复了剪贴路径或图像掩码的 CSS 位置问题
Posted
技术标签:
【中文标题】仅在 Chrome 上修复了剪贴路径或图像掩码的 CSS 位置问题【英文标题】：CSS position fixed problem with clippath or image mask only on Chrome 【发布时间】：2021-12-30 04:04:39 【问题描述】：我正在尝试实现类似于固定背景附件的效果。
我可以使用clip-path 或-webkit-mask-image 获得我想要的结果，但是在 Chrome 上，有时固定图像会在它不在视图中时隐藏，当我向后滚动时，它不会显示，直到我选择某些东西或更改浏览器宽度。我已经在 Firefox 和 Edge 上进行了测试，它们都还可以。
我想知道是什么问题，有没有办法解决这个问题。
gif issue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Issue</title>
<style>
.parent
position: relative;
width: 500px;
height: 200px;
background: lightcoral;
clip-path: inset(0);
box-sizing: border-box;
.child
position: fixed;
top: 0;
width: 100%;
height: 100%;
background-image: url("https://picsum.photos/800/400");
.filler
width: 100%;
min-height: 2000px;
</style>
</head>
<body>
<div class="parent">
<span class="child"></span>
</div>
<div class="filler"></div>
</body>
</html>
【问题讨论】：
【参考方案1】：除了在您的子元素上使用position: fixed，您还需要应用background-attachment: fixed。这两种样式都是必需的。
【讨论】：
实际上使用剪辑路径或蒙版图像或所有其他使用位置的方法的全部意义：固定是不使用背景附件：固定，因为它在内容繁重时会产生巨大的性能影响。另外我认为不适合同时使用 position: fixed 和 background-attachment: fixed 因为 background-attachment 会覆盖位置固定属性行为。 了解@miniOp，那不是解决方案。【参考方案2】：几个月前，我经历了一个痛苦的过程，试图让clip:rect 工作，但遇到的问题与您遇到的相同（我知道您没有使用clip:rect）。根本问题是，在重新加载页面时，如果 clip:rect 区域当前不在视图中，则不会呈现其中的内容。
在开发人员面板中调整我的屏幕大小或关闭并重新打开某个样式会正确地重新渲染我的图像，但这不是解决方案，只是问题的证据。
对我来说，使用clip:rect 的解决方案是在clip:rect 元素内的contents 上使用position 样式。我最初使用relative 定位，但它需要是fixed 或absolute。
请检查您使用的定位，看看是否有帮助。
另外一点 - 也非常令人沮丧 - 我当时测试的浏览器是 Chrome、移动和桌面。一旦我完成了开发并对其进行了彻底的测试，我就让它工作得很好。今天，具有讽刺意味的是，唯一不支持我的clip:rect 内容的浏览器是桌面 Chrome！
这一定是桌面 Chrome 的最新更新...回到绘图板。
【讨论】：
首先感谢您真正理解这个问题。我检查了我的代码，但除了剪辑路径中的固定位置元素之外，我没有任何其他子元素，甚至没有任何伪元素。我什至尝试制作一个 jsfiddle，但我不确定它是用于预览器还是其他任何东西，但那里的一切都很好，我无法模拟这种情况以上是关于仅在 Chrome 上修复了剪贴路径或图像掩码的 CSS 位置问题的主要内容，如果未能解决你的问题，请参考以下文章