Chrome CSS ошибка: "translate3d" внутри повернутого элемента не подчиняется "переполнению: скрыто"

Question

Взгляните на этот CodePen, чтобы понять, что я имею в виду:

.perspective-container {
  margin: 50px 0;
  perspective: 1000px;
  perspective-origin: 0 50%;
}
.card {
  border: 10px solid blue;
  width: 300px;
  height: 300px;
  overflow: hidden;
  transform: rotateY(-45deg);
}
.card-inner {
  width: 300px;
  height: 300px;
  overflow: hidden;
}
.scroller {
  transform: translate(0, -100px);
}
.scroller-3d {
  transform: translate3d(0, -100px, 0);
}
.will-change {
  will-change: transform;
}

<h1>Incorrect (uses will-change):</h1>
<div class="perspective-container">
  <div class="card"><div class="card-inner">
    <div class="scroll-container">
      <div class="scroller will-change">
        <img src="https://images2.pixlis.com/background-image-horizontal-lines-and-stripes-seamless-tileable-grey-black-22hnju.png" />
      </div>
    </div>
  </div></div>
</div>
<h1>Incorrect (uses translate3d):</h1>
<div class="perspective-container">
  <div class="card">
    <div class="scroll-container">
      <div class="scroller-3d">
        <img src="https://images2.pixlis.com/background-image-horizontal-lines-and-stripes-seamless-tileable-grey-black-22hnju.png" />
      </div>
    </div>
  </div>
</div>
<h1>Correct (uses neither translate3d or will-change):</h1>
<div class="perspective-container">
  <div class="card">
    <div class="scroll-container">
      <div class="scroller">
        <img src="https://images2.pixlis.com/background-image-horizontal-lines-and-stripes-seamless-tileable-grey-black-22hnju.png" />
      </div>
    </div>
  </div>
</div>

У меня есть повернутый элемент с примененной перспективой, внутри которого у меня есть "прокручиваемый" div, который трансформируется по вертикали (представьте себе, как журнал переворачивает страницу с прокруткой div внутри каждой страницы). я добавил will-change: transform к внутреннему div и сломал внешний контейнер overflow: hidden, Это похоже на ошибку в Chrome compositor.

Кто-нибудь знает какие-либо обходные пути? Я хотел бы сохранить will-change атрибут, потому что это значительно ускоряет анимацию на мобильном Chrome.

Редактировать: Похоже, что это не относится только к свойству will-change, но к любому свойству, которое делает внутренний div своим собственным композитным слоем. Когда я удаляю will-change свойство, но изменить преобразование в translate3d это также улучшает производительность и показывает ошибку. Единственный класс на внутреннем div, который позволяет повернутому родителю правильно отображать overflow: hidden это тот, который добавляет 2D-преобразование.

Answer 1

Попробуйте что-то вроде этого CodePen:

.container {
  margin: 75px 0;
}

.card {
  border: 10px solid blue;
  width: 300px;
  height: 300px;
  overflow: hidden;
  -webkit-transform: perspective(1000px) rotateY(-45deg);
  transform: perspective(1000px) rotateY(-45deg);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
}

.scroller {
  -webkit-transform: translate(0, -100px);
  transform: translate(0, -100px);
}

.scroller-3d {
  -webkit-transform: translate3d(0, -100px, 0);
  transform: translate3d(0, -100px, 0);
}

.will-change {
  will-change: transform;
}

<h1>Uses will-change:</h1>
<div class="container">
  <div class="card">
    <div class="scroll-container">
      <div class="scroller will-change">
        <img src="https://images2.pixlis.com/background-image-horizontal-lines-and-stripes-seamless-tileable-grey-black-22hnju.png" />
      </div>
    </div>
  </div>
</div>

<h1>Uses translate3d:</h1>
<div class="container">
  <div class="card">
    <div class="scroll-container">
      <div class="scroller-3d">
        <img src="https://images2.pixlis.com/background-image-horizontal-lines-and-stripes-seamless-tileable-grey-black-22hnju.png" />
      </div>
    </div>
  </div>
</div>

<h1>Uses neither translate3d or will-change:</h1>
<div class="container">
  <div class="card">
    <div class="scroll-container">
      <div class="scroller">
        <img src="https://images2.pixlis.com/background-image-horizontal-lines-and-stripes-seamless-tileable-grey-black-22hnju.png" />
      </div>
    </div>
  </div>
</div>

Вы могли бы поиграть с perspective() а также transform-origin ценности.