Open CYBAI opened 4 years ago
Minimized from MDN:
<style>
div {
display: inline-block;
width: 150px;
}
div p {
border: 1px solid blue;
}
span {
border: 1px solid green;
}
</style>
<div>
<p class="withClientRectsOverlay">
<span>Paragraph that spans multiple lines</span>
</p>
</div>
<script>
function addClientRectsOverlay(elt) {
var rects = elt.getClientRects();
for (var i = 0; i != rects.length; i++) {
var scrollTop = document.body.scrollTop;
var scrollLeft = document.body.scrollLeft;
}
}
var elt = document.getElementsByClassName("withClientRectsOverlay");
for (var i = 0; i < elt.length; i++) {
addClientRectsOverlay(elt[i]);
}
</script>
With running document.body.scrollTop
and document.body.scrollLeft
, we can reproduce the broken UI.
Also, we won't have the issue if we comment the inline-block
rule.
While using Servo to check the getClientRects MDN page, I found the example is not rendered correctly.
Built with 24674687ac on macOS 10.14.6