为什么带有隐藏的溢出的translateZ会导致向右轻微移动？

Question

我试图使用基于Google's Performant Parallaxing的纯CSS创建视差效果。这涉及使用perspective，translateZ和scale。它还涉及使用彼此堆叠的许多PNG图像“层”。但是，这些层上存在问题。

在此示例中，仅显示PNG图像的一层，因为它足以显示问题。这是问题的图像（div左侧的空白）。

在以下情况下会出现问题：body的垂直滚动条可见，由于溢出而隐藏body的水平滚动条，并且视差图像的宽度设置为100％。奇怪的是，只需将图像的宽度设置为100vw而不是100％，就可以解决此问题。这是显示问题的代码。

html, body {
  margin: 0;
  width: 100%;
  height: 100vh;
  overflow-x: hidden;
}

body {
  perspective: 100px;
}

.background {
  width: 100%;
  height: 101vh;
  background: url('https://i.pinimg.com/originals/13/17/ba/1317ba3fb0901d7b6be59f9c21d39d12.jpg');
  transform: translateZ(-300px) scale(4);
}

<div class="background"></div>

为什么当宽度为100％而不是100vw时，图像上是否出现空白间隙？

Answer 1

[100％尊重内窗的宽度减去滚动条（对我来说是1903像素计算的宽度），而100vw则尊重整个视口的宽度而与滚动条无关（对我来说是1920px的计算宽度）。

之所以100vw'起作用'是因为图像比对应图像大17px。它也适用于100％的宽度以及高度低于100vh的任何内容，因为滚动条消失并且100％等于100vh。