<!DOCTYPE HTML>
<style>
#positionedScroll {
position: absolute;
left: 100px;
top: 50px;
width: 400px;
height: 300px;
overflow: scroll;
}
.bloat {
height: 10000px;
}
.fixed {
position: fixed;
left: 200px;
top: 150px;
width: 100px;
height: 100px;
overflow: hidden;
}
#transformedScroll {
transform: scaleX(2);
width: 400px;
height: 300px;
overflow: scroll;
}
</style>
<div id="positionedScroll">
<div class="bloat"></div>
<div class="fixed" id="target1">
<div class="bloat"></div>
</div>
</div>
<div id="transformedScroll">
<div class="bloat"></div>
<div class="fixed" id="target2">
<div class="bloat"></div>
</div>
</div>
This test verifies fixed-position elements correctly skip scrolling and adhere to transformed container.