google chrome 中嵌套 css 变换的渲染顺序不正确

Question

在 Google Chrome 中，当在我的应用程序中旋转某些祖先元素时，一些子元素 'disappear' 通过在其直接父元素的背景后面渲染。

这似乎与合成器是否决定创建新图层有关。我对堆叠内容和合成器层做了一些研究，但无法确定导致此问题的原因。

以下是最小复制。

<div style="display: inline-block; transform: rotate(10deg);">
  <div style="display: inline-block; background-color: green; will-change: top; overflow: hidden; position: relative;">
    Text that is visible
    <div style="display: inline-block; transform: translateX(0px);">
      Text that is hidden
    </div>
  </div>
</div>

字符串 "Text that is hidden" 实际上应该出现，但由于某些原因没有出现在 Google Chrome 中。这似乎不会影响 Edge 或 Firefox。

禁用此示例中的几乎所有样式都可以解决问题，但我正试图找出根本原因。

奇怪的是，在某些旋转时问题消失了，例如旋转（5 度）

Answer 1

我不清楚为什么会这样，但是在中间添加 isolation: isolate div 解决了这个问题。如果有人能解释为什么这有效，我会接受你的回答。

<div style="display: inline-block; transform: rotate(10deg);">
  <div style="display: inline-block; background-color: green; will-change: top; overflow: hidden; position: relative; isolation: isolate">
    Text that is visible
    <div style="display: inline-block; transform: translateX(0px);">
      Text that is hidden
    </div>
  </div>
</div>

google chrome 中嵌套 css 变换的渲染顺序不正确

Incorrect render order in google chrome with nested css transforms

google-chrome

css-transforms