Chrome CSS bug: "translate3d" inside a rotated element does not obey "overflow: hidden"

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