257375 2023-05-26 05:25:47 -0700 elem.getBoundingClientRect does not include visualViewport.offsetLeft 2023-06-02 05:26:16 -0700 1 1 1 Unclassified WebKit Layout and Rendering WebKit Nightly Build iPhone / iPad iOS 16 NEW https://bugs.webkit.org/show_bug.cgi?id=170981 InRadar P2 Normal --- 1 bugzillawebkit webkit-unassigned bfulgham simon.fraser webkit-bug-importer zalan oldest_to_newest 1958168 0 466505 bugzillawebkit 2023-05-26 05:25:47 -0700 Created attachment 466505 minimal repro of the issue When the visual viewport is scaled and moved a getBoundingClientRect does not include visualViewport.offsetLeft. In my minimal repro (attached and online https://www.katur.de/issues/safari_viewport-scaled_pos-fixed.html ) I check every second the BoundingClientRect of a base element and put its top,left value to the position of a position:fixed overlay element. This overlay element should cover the base element exactly. On desktop and mobile Chrome+Firefox this works even with pinch zoom. With mobile Safari I get an offset in the size of visualViewport.offsetLeft. The repo has a second overlay which uses the same BoundingClientRect values but add visualViewport.offsetTop/Left value to the position. With mobile Chrome+Firefox the "BCR overlay" is always over the base element even with pinch zoom. With mobile Safari the "BCR+offset* overlay" is always over the base element even with pinch zoom. 1959529 1 webkit-bug-importer 2023-06-02 05:26:16 -0700 <rdar://problem/110164602> 466505 2023-05-26 05:25:47 -0700 2023-05-26 05:25:47 -0700 minimal repro of the issue file_257375.txt text/plain 2595 bugzillawebkit PGh0bWw+DQogIDxoZWFkPg0KICAgIDx0aXRsZT5wb3NpdGlvbjpmaXhlZCB3aXRoIHNjYWxlZCB2 aWV3cG9ydDwvdGl0bGU+DQogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRo PWRldmljZS13aWR0aCwgaGVpZ2h0PWRldmljZS1oZWlnaHQiIC8+DQogICAgPHN0eWxlPg0KICAg ICAgKiB7DQogICAgICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7DQogICAgICB9DQogICAgICBo dG1sLA0KICAgICAgYm9keSB7DQogICAgICAgIG1hcmdpbjogMDsNCiAgICAgICAgcGFkZGluZzog MDsNCiAgICAgICAgd2lkdGg6IDEwMDBweDsNCiAgICAgICAgaGVpZ2h0OiAyMDAwcHg7DQogICAg ICAgIGJhY2tncm91bmQtY29sb3I6IGdyZXk7DQogICAgICB9DQogICAgICAjY29udGVudCB7DQog ICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTsNCiAgICAgICAgbGVmdDogNTBweDsNCiAgICAgICAg dG9wOiAyMDBweDsNCiAgICAgICAgd2lkdGg6IDE4MHB4Ow0KICAgICAgICBoZWlnaHQ6IDYwcHg7 DQogICAgICAgIGJhY2tncm91bmQtY29sb3I6IHJlZDsNCiAgICAgICAgYm9yZGVyOiAzcHggc29s aWQgZGFya2dyZWVuOw0KICAgICAgfQ0KICAgICAgLm92ZXJsYXkgew0KICAgICAgICBwb3NpdGlv bjogZml4ZWQ7DQogICAgICAgIGJvcmRlcjogM3B4IHNvbGlkIHRyYW5zcGFyZW50Ow0KICAgICAg ICBiYWNrZ3JvdW5kLWNsaXA6IGNvbnRlbnQtYm94Ow0KICAgICAgICBmb250LXNpemU6IDEwcHg7 DQogICAgICAgIHdoaXRlLXNwYWNlOiBwcmUtbGluZTsNCiAgICAgIH0NCiAgICAgICNvdmVybGF5 Tm9PZmZzZXQgew0KICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiBsaWdodGdyZWVuOw0KICAgICAg fQ0KICAgICAgI292ZXJsYXlPZmZzZXQgew0KICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiBsaW1l Z3JlZW47DQogICAgICB9DQogICAgPC9zdHlsZT4NCiAgPC9oZWFkPg0KICA8Ym9keT4NCiAgICA8 c2NyaXB0IHR5cGU9Im1vZHVsZSI+DQogICAgICBjb25zdCBjb250ZW50ID0gZG9jdW1lbnQuZ2V0 RWxlbWVudEJ5SWQoImNvbnRlbnQiKTsNCiAgICAgIGNvbnN0IG92ZXJsYXlPZmZzZXQgPSBkb2N1 bWVudC5nZXRFbGVtZW50QnlJZCgib3ZlcmxheU9mZnNldCIpOw0KICAgICAgY29uc3Qgb3Zlcmxh eU5vT2Zmc2V0ID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoIm92ZXJsYXlOb09mZnNldCIpOw0K ICAgICAgc2V0SW50ZXJ2YWwoKCkgPT4gew0KICAgICAgICBjb25zdCBjb250ZW50QkNSID0gY29u dGVudC5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKTsNCg0KICAgICAgICBvdmVybGF5Tm9PZmZzZXQu c3R5bGUudG9wID0gY29udGVudEJDUi50b3AgKyAicHgiOw0KICAgICAgICBvdmVybGF5Tm9PZmZz ZXQuc3R5bGUubGVmdCA9IGNvbnRlbnRCQ1IubGVmdCArICJweCI7DQoNCiAgICAgICAgb3Zlcmxh eU9mZnNldC5zdHlsZS50b3AgPQ0KICAgICAgICAgIGNvbnRlbnRCQ1IudG9wICsgdmlzdWFsVmll d3BvcnQub2Zmc2V0VG9wICsgInB4IjsNCiAgICAgICAgb3ZlcmxheU9mZnNldC5zdHlsZS5sZWZ0 ID0NCiAgICAgICAgICBjb250ZW50QkNSLmxlZnQgKyB2aXN1YWxWaWV3cG9ydC5vZmZzZXRMZWZ0 ICsgInB4IjsNCg0KICAgICAgICAvLyBzZXQgc2l6ZQ0KICAgICAgICBvdmVybGF5Tm9PZmZzZXQu c3R5bGUud2lkdGggPSBjb250ZW50QkNSLndpZHRoICsgInB4IjsNCiAgICAgICAgb3ZlcmxheU5v T2Zmc2V0LnN0eWxlLmhlaWdodCA9IGNvbnRlbnRCQ1IuaGVpZ2h0ICsgInB4IjsNCiAgICAgICAg b3ZlcmxheU9mZnNldC5zdHlsZS53aWR0aCA9IGNvbnRlbnRCQ1Iud2lkdGggKyAicHgiOw0KICAg ICAgICBvdmVybGF5T2Zmc2V0LnN0eWxlLmhlaWdodCA9IGNvbnRlbnRCQ1IuaGVpZ2h0ICsgInB4 IjsNCg0KICAgICAgICAvLyBkZWJ1ZyBvdXRwdXQNCiAgICAgICAgb3ZlcmxheU9mZnNldC50ZXh0 Q29udGVudCA9IkJDUit2aXN1YWxWaWV3cG9ydC5vZmZzZXQqIg0KICAgICAgICBvdmVybGF5T2Zm c2V0LnRleHRDb250ZW50ICs9DQogICAgICAgICAgIlxuVlYgb2Zmc2V0VG9wICIgKyBNYXRoLnJv dW5kKHZpc3VhbFZpZXdwb3J0Lm9mZnNldFRvcCk7DQogICAgICAgIG92ZXJsYXlPZmZzZXQudGV4 dENvbnRlbnQgKz0NCiAgICAgICAgICAiXG5WViBvZmZzZXRMZWZ0ICIgKyBNYXRoLnJvdW5kKHZp c3VhbFZpZXdwb3J0Lm9mZnNldExlZnQpOw0KICAgICAgICBvdmVybGF5T2Zmc2V0LnRleHRDb250 ZW50ICs9DQogICAgICAgICAgIlxuc2NhbGUgRFBSIiArDQogICAgICAgICAgd2luZG93LmRldmlj ZVBpeGVsUmF0aW8udG9GaXhlZCgyKSArDQogICAgICAgICAgIiBWViIgKw0KICAgICAgICAgIHZp c3VhbFZpZXdwb3J0LnNjYWxlLnRvRml4ZWQoMik7DQogICAgICB9LCAxMDAwKTsNCiAgICA8L3Nj cmlwdD4NCg0KICAgIDxkaXYgaWQ9ImNvbnRlbnQiPmhpZGUgbWU8L2Rpdj4NCiAgICA8ZGl2IGlk PSJvdmVybGF5Tm9PZmZzZXQiIGNsYXNzPSJvdmVybGF5Ij5CQ1I8L2Rpdj4NCiAgICA8ZGl2IGlk PSJvdmVybGF5T2Zmc2V0IiBjbGFzcz0ib3ZlcmxheSI+QkNSK3Zpc3VhbFZpZXdwb3J0Lm9mZnNl dCo8L2Rpdj4NCiAgPC9ib2R5Pg0KPC9odG1sPg0K