纯视差效果不是左侧的工作空间

Question

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

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

在这个网站上：http://keithclark.co.uk/articles/pure-css-parallax-websites/作者描述了一个解决方法：

  

通过将transform-origin和perspective-origin锚定到视口的右侧，可以解决此错误：

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

但是没有做到这一点。

我在jsfiddle

中收集此内容

有什么建议吗？

提前致谢。

Answer 1

微调#container的{​​{1}}属性可以解决问题：

left

Answer 2

更换宽度：100％;宽度：100vw;在.background中