css - 为什么翻译 div 去除溢出？

Question

我并不完全清楚 CSS 转换如何影响文档的流布局和元素的定位。根据 MDN 和 W3C 上的文档，CSS 转换不会干扰流布局:
来自 MDN on CSS transforms (强调我的):

By modifying the coordinate space, CSS transforms change the shape and position of the affected content without disrupting the normal document flow.

因此，如果我们转换一个元素，原始流布局应该保持不变，转换的结果应该是纯粹的视觉效果。
下面演示了一个简单的例子:

.container {
  background: white;
  margin: 0 auto;
  border: 1px solid grey;
}

.block {
  width: 100%;
  height: 100px;
}

.blue {
  background: blue;
}

.red {
  background: yellow;
}

.transform {
  transform: translateY(-200%);
}

<div class="container">
  <div class="block red transform"></div>
  <div class="block blue"></div>
</div>

在这个例子中，有两个 div元素，上层元素被垂直平移，使其不再可见。但是，流程布局保持不变，文档中没有溢出。也就是说，转换的结果是纯粹的视觉效果。
现在，考虑一个带有固定宽度包装器的页面布局，这样子元素的宽度就受包装器元素的限制。现在添加一个比包装器宽的定位元素并添加一个偏移量(例如 left )。在“足够窄”的窗口中，主体溢出，我们可以水平滚动。然而，如果我们翻译相同的元素并重新居中，溢出就会消失，这意味着转换不是纯粹的视觉。
下面的示例展示了这种效果。最初，不转换偏移元素。您可以尝试调整窗口大小以查看溢出，然后使用中间的按钮切换转换。

document.getElementById('toggle').addEventListener('click', function(event) {
  const blocks = document.querySelectorAll('.block.wide');
  for(let i=0;i<blocks.length;i++) {
    const block = blocks[i];
      block.classList.toggle('transform');
    }
});

html, body {
  background: #ddd;
}

.container {
  background: white;
  max-width: 1152px;
  margin: 0 auto;
}

.content {
  border: 1px solid grey;
}

.block.wide {
  background: yellow;
  max-width: 1380px;
  width: 100vw;
  position: relative;
  left: 50%;
}

.block.wide.transform {
  transform: translateX(-50%);
}

<div class="container">
  <div class="content">
    <div class="block">
      <h1>Lorem ipsum dolor sit amet</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p><strong>Click the button below to toggle the transform and see the overflow vanish</strong></p>
      <button id="toggle">Toggle Transform</button>
  </div>
    <div class="block wide">
      <h1>Lorem ipsum dolor sit amet</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>

这是符合规范的预期行为吗？偏移和转换如何相互作用？
在我所有的测试用例中，CSS 转换都达到了预期的结果。但是，我觉得我是靠运气而不是技术规范。

Answer 1

这里有几个要点需要说明。
来自 CSS Transforms 规范，第 3. The Transform Rendering Model 节说:

For elements whose layout is governed by the CSS box model, the transform property does not affect the flow of the content surrounding the transformed element. However, the extent of the overflow area takes into account transformed elements. This behavior is similar to what happens when elements are offset via relative positioning. Therefore, if the value of the overflow property is scroll or auto, scrollbars will appear as needed to see content that is transformed outside the visible area. Specifically, transforms can extend (but do not shrink) the size of the overflow area, which is computed as the union of the bounds of the elements before and after the application of transforms.

这意味着转换应该影响溢出和滚动。但是，在您的第一个示例中，溢出是负坐标空间，而 that overflow is always clipped ，所以它不会生成任何新的滚动条。
但是你的第二个例子，直接阅读，似乎与规范相矛盾，变换缩小了溢出区域。我认为这里发生的是位置相对位移，正如上面引用所承认的那样，转换是非常相似的操作，并且转换正在消除相对定位的影响。
换句话说，溢出区域被计算为应用相对定位之前和之后元素边界的并集 和 变换。