如何解决纯CSS视差-Firefox translationZ问题?加载时仅可见一半内容
我正在摆弄一个视差网站,一直按照Keith Clark的步骤逐步了解视差。但是,我偶然发现了一个看起来像Firefox问题的问题?加载时,将第一层和深海绿色背景层切成两半。如果我将translateZ属性从-1px更改为0,则所有内容均已正确加载,但视差效果不再起作用。 如果我向下滚动或调整浏览器的大小,其余的可见,但是我希望在初始加载时可见。
Link to codepen我正在使用Firefox 80.0。
.parallax {
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax__layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 100vh 0;
width: 100%;
}
.parallax__layer--base {
transform: translateZ(0);
}
.parallax__layer--back {
transform: translateZ(-1px);
background-color: darkseagreen;
width: 100%;
}
.title {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
color: #fff;
text-align: center;
}
解决方法
就我而言,这是一个继承的“溢出:隐藏”,不必要地裁剪了FireFox中的内容。
通读我发现的原始文档:
对元素进行分组时要记住的一个重要规则是 无法剪辑组的内容。设置溢出:隐藏在 parallax__group将打破视差效果。未剪辑的内容将 导致后代元素溢出,因此我们需要发挥创造力 使用组的z-index值来确保内容正确 在访客滚动浏览文档时显示/隐藏。
为此,您必须巧妙地处理z-index,这在我的方法中有点问题,但是我可以解决。
尤其是通过使用交叉观察器。一旦达到某个交点,z索引就会翻转。这使整个代码更加复杂,这是我所担心的,但它似乎可以工作。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。