[Webkit-unassigned] [Bug 273268] New: document.body.getBoundingClientRect() returns incorrect results.

Thu Apr 25 13:01:37 PDT 2024

https://bugs.webkit.org/show_bug.cgi?id=273268

            Bug ID: 273268
           Summary: document.body.getBoundingClientRect() returns
                    incorrect results.
           Product: WebKit
           Version: Safari Technology Preview
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Layout and Rendering
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: ikilpatrick at chromium.org
                CC: bfulgham at webkit.org, simon.fraser at apple.com,
                    zalan at apple.com

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>

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20240425/c406b54b/attachment.htm>