273268 2024-04-25 13:01:37 -0700 [Regression: STP193] document.body.getBoundingClientRect() returns incorrect results. 2024-04-26 16:12:52 -0700 1 1 1 Unclassified WebKit Layout and Rendering Safari Technology Preview Unspecified Unspecified RESOLVED CONFIGURATION CHANGED https://bugs.webkit.org/show_bug.cgi?id=271934 InRadar P2 Normal --- 1 ikilpatrick zalan ahmad.saleem792 bfulgham simon.fraser webkit-bug-importer zalan oldest_to_newest 2031261 0 ikilpatrick 2024-04-25 13:01:37 -0700 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> 2031266 1 webkit-bug-importer 2024-04-25 13:27:19 -0700 <rdar://problem/127070600> 2031411 2 zalan 2024-04-25 20:33:49 -0700 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). 2031620 3 zalan 2024-04-26 16:12:52 -0700 reverted at 278063@main