Chrome CSS bug: "translate3d" all'interno di un elemento ruotato non obbedisce "overflow: hidden"

Question

Date un'occhiata a questo CodePen per vedere quello che voglio dire:

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

Ho un elemento ruotato con prospettiva applicata, all'interno del quale ho un div 'scrolling' che viene trasformato verticalmente (immagina un'esperienza di rotazione della pagina di una rivista con div di scorrimento all'interno di ciascuna pagina). Ho aggiunto will-change: transform al div interno e che ha rotto il contenitore esterno overflow: hidden. Questo sembra essere un bug con il compositor di Chrome.

Qualcuno sa di soluzioni alternative? Vorrei mantenere l'attributo will-change perché accelera in modo significativo le animazioni su Chrome per dispositivi mobili.

Modifica: Sembra che questo non sia specifico della proprietà di modifica ma di qualsiasi proprietà che rende il div interno il proprio livello di compositing. Quando rimuovo la proprietà will-change ma cambia la trasformazione in translate3d che migliora le prestazioni allo stesso modo e mostra il bug. L'unica classe sul div interno che consente al genitore ruotato di rappresentare correttamente overflow: hidden è quella che aggiunge la trasformazione 2D.

Answer 1

provare qualcosa di simile 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>

Si può anche giocare con perspective() e transform-origin valori.