Chrome CSS Bug: "translate3d" innerhalb eines gedrehten Element ist "overflow: hidden" nicht gehorchen

Question

Werfen Sie einen Blick auf diese CodePen, um zu sehen, was ich meine:

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

Ich habe ein gedrehtes Element mit angewendeter Perspektive, in dessen Inneren ich ein "scrollendes" div habe, das vertikal transformiert wird (stelle dir eine Magazin-Seitenwende-Erfahrung vor mit Scroll-divs innerhalb jeder Seite). Ich fügte will-change: transform zum inneren div hinzu und das brach den äußeren Behälter overflow: hidden. Dies scheint ein Fehler mit dem Chrome-Compositor zu sein.

Kennt jemand Workarounds? Ich möchte das Attribut will-change beibehalten, da es die Animationen auf dem mobilen Chrome erheblich beschleunigt.

Bearbeiten: Es sieht so aus, dass dies nicht spezifisch für die Will-Change-Eigenschaft ist, sondern für jede Eigenschaft, die das innere div zu einer eigenen Compositing-Schicht macht. Wenn ich die Eigenschaft will-change entferne, aber die Umwandlung in eine translate3d ändern, die ebenfalls die Leistung verbessert und den Fehler aufweist. Die einzige Klasse im inneren Teil, die es dem gedrehten Elternteil ermöglicht, overflow: hidden korrekt zu rendern, ist derjenige, der die 2D-Transformation hinzufügt.

Answer 1

Probieren Sie etwas wie dieses 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>

Sie mit perspective() und transform-origin Werte spielen könnte.