<!DOCTYPE html>
<style>
#searchbar {
bottom: 0; /* Useful for seeing the issue visually. */
position: fixed;
}
#recentlink {
background: purple;
width: 150px;
height: 150px;
}
header {
padding: 10px;
position: relative;
z-index: 50;
backface-visibility: hidden;
}
</style>
To manually test, just scroll down, there should be no purple trace.
<header>
<div id="searchbar">
<div id="recentlink"></div>
</div>
</header>
<!-- Used to have some overflowing content to scroll -->
<div style="height: 5000px"></div>
<script src="../resources/text-based-repaint.js" type="text/javascript"></script>
<script>
window.scrollTo(0, 1000);
window.testIsAsync = true;
if (window.testRunner)
testRunner.waitUntilDone();
function repaintTest()
{
window.scrollBy(0, 400);
finishRepaintTest();
}
// We need to skip 2 frames for the bug to show under DRT.
window.requestAnimationFrame(function() {
runRepaintAndPixelTest();
});
</script>