take @ codepen see mean:
.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>i have rotated element perspective applied, inside of have 'scrolling' div transformed vertically (imagine magazine page-turn experience scrolling divs inside each page). added will-change: transform inner div , broke outer container overflow: hidden. seems bug chrome compositor.
does know of workarounds? keep will-change attribute because speeds-up animations on mobile chrome.
edit: looks not specific will-change property property makes inner div own compositing layer. when remove will-change property change transform translate3d improves performance , exhibits bug. class on inner div allows rotated parent correctly render overflow: hidden 1 adds 2d transform.
try 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>you play perspective() , transform-origin values.
