Неправильный порядок рендеринга в Google Chrome с вложенными преобразованиями CSS - PullRequest
Новая
       27

Неправильный порядок рендеринга в Google Chrome с вложенными преобразованиями CSS

0 голосов
/ 22 сентября 2019

В Google Chrome при вращении определенных элементов-предков в моем приложении некоторые дети «исчезают», отрисовывая их на фоне своего непосредственного родителя.

Похоже, это связано с тем, решает ли композитор создать новыйслой.Я провел некоторые исследования по наложению содержимого и слоев композитора, но не смог определить причину этой проблемы.

Ниже приведено минимальное воспроизведение. 

<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>

Строка «Текст, который скрыт» должен отображаться, но по какой-то причине отсутствует в Google Chrome.Похоже, что это не влияет на Edge или Firefox.

Отключение практически любого из стилей в этом примере решит проблему, но я пытаюсь разобраться с основной причиной.

Любопытнопри определенных поворотах проблема исчезает, например, rotate (5 градусов)

...