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

【问题标题】：Why does translateZ with overflow hidden cause a slight movement to the right?为什么带有溢出隐藏的 translateZ 会导致向右轻微移动？
【发布时间】：2020-10-06 20:42:35
【问题描述】：

我试图使用基于 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);
}

&lt;div class="background"&gt;&lt;/div&gt;

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

【问题讨论】：

标签： html css css-transforms parallax perspective

【解决方案1】：

100% 尊重内部窗口的宽度减去滚动条（对我来说计算宽度为 1903px），而 100vw 尊重整个视口的宽度而不考虑滚动条（对我来说计算宽度为 1920px）。

100vw 在这里“起作用”的原因是因为图像比对应图像大 17 像素。它也适用于 100% 宽度和任何低于 100vh 的高度，因为滚动条消失了，100% 等于 100vh。

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

【讨论】：