html - 左侧没有工作空间的纯视差效果

Question

我对纯css视差效果有一个奇怪的问题。我遵循了本教程:https://css-tricks.com/tour-performant-responsive-css-site/

但是就像在示例中一样，我在左侧站点上有一个空白区域。经过一些研究，我读到这应该是基于 webkit 的浏览器中独有的错误，但我在 firefox 中也得到了相同的结果。

在此站点上:http://keithclark.co.uk/articles/pure-css-parallax-websites/作者描述了一种解决方法:

It is possible to work around for this bug by anchoring the transform-origin and perspective-origin to the right hand side of the viewport:

.parallax {
  perspective-origin-x: 100%;
}
.parallax__layer {
  transform-origin-x: 100%;
}

但这并没有起到作用。

我在 jsfiddle 中收集了这个

有什么建议吗？

提前致谢。

Answer 1

替换宽度:100%；按宽度:100vw；在.background