RESOLVED CONFIGURATION CHANGED273268
[Regression: STP193] document.body.getBoundingClientRect() returns incorrect results. 
https://bugs.webkit.org/show_bug.cgi?id=273268
Summary [Regression: STP193] document.body.getBoundingClientRect() returns incorrect ...
ikilpatrick
Reported 2024-04-25 13:01:37 PDT
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
Comment 1 2024-04-25 13:27:19 PDT
<rdar://problem/127070600>
alan
Comment 2 2024-04-25 20:33:49 PDT
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
Comment 3 2024-04-26 16:12:52 PDT
reverted at 278063@main
Note You need to log in before you can comment on or make changes to this bug.