<!DOCTYPE html>
<style>
.container {
position: absolute;
top: 25px;
width: 100px;
height: 100px;
border: 1px dashed black;
overflow: hidden;
}
.scroller {
transform-origin: 0 0;
width: 100px;
height: 100px;
overflow: scroll;
}
.bloat {
width: 150px;
height: 150px;
background: green;
}
</style>
<div class="container" style="left:25px;">
<div class="scroller" style="transform:translate3d(0, 1px, 0)scale(1.5);">
<div class="bloat"></div>
</div>
</div>
<div class="container" style="left:175px;">
<div class="scroller" style="transform:translate3d(0, 1.25px, 0)scale(1.5);">
<div class="bloat"></div>
</div>
</div>
<div class="container" style="left:325px;">
<div class="scroller" style="transform:translate3d(0, 1.5px, 0)scale(1.5);">
<div class="bloat"></div>
</div>
</div>
<div class="container" style="left:475px;">
<div class="scroller" style="transform:translate3d(0, 1.75px, 0)scale(1.5);">
<div class="bloat"></div>
</div>
</div>
This test verifies composited scrollers have consistent clip rect regardless of current scroll offset.
<script>
for (elem of document.getElementsByClassName("scroller"))
elem.scrollTop = 1;
</script>