Question

我一直在尝试使用this Four Kitchens blog post的代码重新创建固定位置背景效果，并在Safari，Chrome和Firefox之间遇到不一致的问题。我在jsfiddle中有以下代码：

.container {
    position: relative;
}
.fixed {
    padding-bottom: 4em;
    position: relative;
    overflow: hidden;
    height: 100vh;
    min-height: 500px;
    width: 100%;
    z-index: 1;
/*     transform: rotate(0); */
}
.fixed:before {
    content: ' ';
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: white;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
    will-change: transform;
}
.one:before {
    background-image: url('http://placekitten.com/800/599');
}
.two:before {
    background-image: url('http://placekitten.com/800/601');
}
.three:before {
    background-image: url('http://placekitten.com/800/602');
}
.four:before {
    background-image: url('http://placekitten.com/800/615');
}
.five:before {
    background-image: url('http://placekitten.com/800/604');
}

在Chrome和Safari中，.fixed:before伪元素似乎与其.fixed父项（它们本身为position: relative;）相关，但是以固定关系滚动到视口。在Firefox中，伪元素都是相对于视口的固定位置，因此只有最后一个可见。

如果您在Firefox或Chrome中取消注释transform: rotate(0);（例如在this jsfiddle中），则.fixed父项将成为包含块（per the specification），并且有效的图像将成为绝对定位。滚动相对于视口的效果会丢失，但Safari中没有任何变化。

z-index也正在发挥作用，因为z-index: 1; .fixed在Safari和Chrome中至关重要，而z-index: -1;上的.fixed:before是必需的Safari浏览器。

导致图像相对于视口滚动的原因是什么，但在Safari和Chrome中相对于父图像保持定位？有没有办法在Firefox中复制Safari的渲染？

固定位置伪元素在浏览器中滚动不一致

0 个答案: