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

Question

我试图使用基于 Google's Performant Parallaxing 的纯 CSS 创建视差效果。这涉及使用 perspective、translateZ 和 scale。它还涉及使用大量 "layers" PNG 图像堆叠在一起。但是，这些层存在问题。

在这个例子中，只显示了一层PNG图像，因为它足以说明问题。这是问题的图像（div 左侧的白色 space）。

问题出现在以下情况：body的垂直滚动条可见，body的水平滚动条溢出隐藏，视差图像设置为a宽度为 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时出现白色space间隙？

Answer 1

100% 表示内部 window 减去滚动条的宽度（我计算的宽度为 1903px），而 100vw 表示整个视口的宽度，不考虑滚动条（计算宽度为 1920px我）。

这里之所以是100vw 'works'是因为图片比对应图片大17px。它也适用于 100% 宽度和低于 100vh 高度的任何东西，因为滚动条消失并且 100% 等于 100vh。

当您在 translateZ 中添加一个负值时，您正在翻译的元素在视觉上会变小，因此您看到的差距是其结果。如果您希望图像填满屏幕，请在变换中使用较小的值或在比例或宽度中使用较高的值。

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

Why does translateZ with overflow hidden cause a slight movement to the right?

html

css

css-transforms

parallax

perspective