Bug 273268
| Summary: | [Regression: STP193] document.body.getBoundingClientRect() returns incorrect results. | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | ikilpatrick |
| Component: | Layout and Rendering | Assignee: | alan <zalan> |
| Status: | RESOLVED CONFIGURATION CHANGED | ||
| Severity: | Normal | CC: | ahmad.saleem792, bfulgham, simon.fraser, webkit-bug-importer, zalan |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Safari Technology Preview | ||
| Hardware: | Unspecified | ||
| OS: | Unspecified | ||
| See Also: | https://bugs.webkit.org/show_bug.cgi?id=271934 | ||
ikilpatrick
After https://github.com/WebKit/WebKit/commit/08da24e33a25275b870ce9d3a2604c02c42495e5 landed document.body.getBoundingClientRect() returns incorrect results in a bunch of different situations.
This is present in Safari Tech Preview 193.
I've created 6 examples here, but basically got bored after this point :P . (There are more I can think of off the top of my head).
Let me know if you have any questions!
<!DOCTYPE html>
<style>
body { width: 100%; height: 100%; }
</style>
<body>
<div id=target>hi</div>
</body>
<script>
document.body.offsetTop;
target.style.marginTop = '40px'
console.log(document.body.getBoundingClientRect().top);
document.body.offsetTop;
console.log(document.body.getBoundingClientRect().top);
</script>
<!DOCTYPE html>
<style>
body { width: 80%; height: 100px; overflow: hidden; clear: left;}
div { height: 20px; }
html.fail > div { height: 100px; }
</style>
<body></body>
<script>
document.documentElement.insertBefore(document.createElement('div'), document.body);
document.body.offsetTop;
document.documentElement.className = 'fail';
console.log(document.body.getBoundingClientRect().top);
document.body.offsetTop;
console.log(document.body.getBoundingClientRect().top);
</script>
<!DOCTYPE html>
<style>
body { width: 200px; height: 200px; display: table; }
</style>
<body>
<div id="target" style="height: 20px;"></div>
</body>
<script>
document.body.offsetTop;
target.style.height = '300px';
console.log(document.body.getBoundingClientRect().height);
document.body.offsetTop;
console.log(document.body.getBoundingClientRect().height);
</script>
<!DOCTYPE html>
<style>
/* force a conventional scrollbar */
html::-webkit-scrollbar {
width: 20px;
height: 20px;
background-color: lime;
}
body { width: 100%; height: 200px; margin: 0; }
</style>
<body>
<div id="target" style="height: 80vh;"></div>
</body>
<script>
document.body.offsetTop;
target.style.height = '200vh';
console.log(document.body.getBoundingClientRect().width);
document.body.offsetTop;
console.log(document.body.getBoundingClientRect().width);
</script>
<!DOCTYPE html>
<style>
html { display: flex; flex-direction: column; }
body { width: 200px; height: 50%; }
</style>
<body>
<div id="target"></div>
</body>
<script>
document.body.offsetTop;
target.style.height = '80vh';
console.log(document.body.getBoundingClientRect().height);
document.body.offsetTop;
console.log(document.body.getBoundingClientRect().height);
</script>
<!DOCTYPE html>
<style>
body { width: 200px; height: 50%; min-height: min-content; }
</style>
<body>
<div id="target"></div>
</body>
<script>
document.body.offsetTop;
target.style.height = '80vh';
console.log(document.body.getBoundingClientRect().height);
document.body.offsetTop;
console.log(document.body.getBoundingClientRect().height);
</script>
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Radar WebKit Bug Importer
<rdar://problem/127070600>
alan
Thank you, yeah this is clearly incomplete. will just revert this change for now (I didn't feel particularly happy about it the first place).
alan
reverted at 278063@main