249848 2022-12-23 11:14:49 -0800 Under certain CSS conditions, showing an element that overflows scroll re-renders fixed elements outside containers 2022-12-30 08:22:39 -0800 1 1 1 Unclassified WebKit Layout and Rendering Safari 16 Mac (Apple Silicon) macOS 12 RESOLVED DUPLICATE 222132 P2 Normal --- 1 morungos webkit-unassigned bfulgham simon.fraser zalan oldest_to_newest 1921706 0 464183 morungos 2022-12-23 11:14:49 -0800 Created attachment 464183 A small HTML+CSS+JS file. When clicking the button, the button moves When using a position: fixed area to stick some buttons inside an overflow: auto area, showing additional content that overflows the scroll area can trigger the buttons moving, apparently outside their container by the relative offset. A small replication file is attached. What I've observed so far is: 1. Clicking the button, the text overflows the box, and this causes the inner position: fixed area to jump, by an amount approximately equal to the inner position: fixed area's relative offset within its parent. 2. This only happens when the height of the overflow: auto box is constrained, either by height: 100% or flex: 1 0. Without either, no issue. 3. This only happens when overflow: auto, or overflow: scroll is present. overflow: hidden and overflow: none do not have the same effect 4. It only seems to happen when there are nested position: fixed elements. Without either being fixed, no issue. 5. Safari Developer Tools still believe the elements are in their original location, i.e., you can select them in a different position from where they are rendered 6. Toggling almost any pseudo-class in the developer tools causes the elements to jump back to the correct location. 1922276 1 464259 zalan 2022-12-30 07:50:18 -0800 Created attachment 464259 Test reduction Great test case. Thanks for filing! 1922277 2 zalan 2022-12-30 07:53:50 -0800 This has progressed somewhere between 252435@main and 254525@main. 1922279 3 zalan 2022-12-30 08:22:12 -0800 Progressed at 253865@main. 1922280 4 zalan 2022-12-30 08:22:39 -0800 *** This bug has been marked as a duplicate of bug 222132 *** 464183 2022-12-23 11:14:49 -0800 2022-12-23 11:14:49 -0800 A small HTML+CSS+JS file. When clicking the button, the button moves safari.html text/html 2298 morungos PGh0bWw+CiAgICA8aGVhZD4KICAgICAgICA8c3R5bGU+Ci5mbG9hdGluZyB7CiAgICBwb3NpdGlv bjogZml4ZWQ7CiAgICBkaXNwbGF5OiBmbGV4OwogICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsK ICAgIHRvcDogYXV0bzsKICAgIHJpZ2h0OiBhdXRvOwogICAgbGVmdDogM2VtOwogICAgYm90dG9t OiAzZW07CiAgICBib3JkZXI6IDFweCBzb2xpZCBibGFjazsKICAgIHdpZHRoOiAyMDBweDsKICAg IGhlaWdodDogMzAwcHg7Cn0KLmZsb2F0aW5nLWJvZHkgewogICAgZGlzcGxheTogZmxleDsKICAg IGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47CiAgICAvKiogUmVtb3ZpbmcgdGhpcyBtYWtlcyBhbGwg Z29vZCAqLwogICAgb3ZlcmZsb3c6IGF1dG87CiAgICAvKiogUmVtb3ZpbmcgdGhpcyBtYWtlcyBh bGwgZ29vZCAqLwogICAgZmxleDogMSAwOwp9Ci5jb250cm9sIHsKICAgIC8qKiBSZW1vdmluZyB0 aGlzIG1ha2VzIGFsbCBnb29kICovCiAgICBwb3NpdGlvbjogZml4ZWQ7CiAgICBtYXJnaW4tdG9w OiAxZW07CiAgICBtYXJnaW4tbGVmdDogMC41ZW07CiAgICBkaXNwbGF5OiBmbGV4OwogICAgZmxl eC1kaXJlY3Rpb246IHJvdzsKfQouY29udHJvbCBidXR0b24gewogICAgYm9yZGVyLXJhZGl1czog MTAwcHg7CiAgICBwYWRkaW5nOiA2cHg7CiAgICBtYXJnaW46IDAgMnB4OwogICAgYm94LXNoYWRv dzogMCAwIDAuNnJlbSAwcmVtIHZhcihibGFjayk7Cn0KLnRvZ2dsYWJsZS1pdGVtIHsKICAgIGRp c3BsYXk6IG5vbmU7Cn0KLnRvZ2dsYWJsZS1pdGVtLnNob3cgewogICAgZGlzcGxheTogYmxvY2s7 Cn0KLmJvZHkgewogICAgbWFyZ2luLXRvcDogMzBweDsKfQogICAgICAgIDwvc3R5bGU+CiAgICA8 L2hlYWQ+CiAgICA8Ym9keT4KICAgICAgICA8aDE+VGVzdCBvZiBTYWZhcmk8L2gxPgogICAgICAg IDxkaXYgY2xhc3M9ImZsb2F0aW5nIj4KICAgICAgICAgICAgPGRpdiBjbGFzcz0iZmxvYXRpbmct Ym9keSI+CiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPSJjb250cm9sIj4KICAgICAgICAgICAg ICAgICAgICA8YnV0dG9uIGlkPSJ0b2dnbGUiPgogICAgICAgICAgICAgICAgICAgICAgICBDbGlj ayBtZSBhbmQgd2F0Y2ggbWUgbW92ZQogICAgICAgICAgICAgICAgICAgIDwvYnV0dG9uPgogICAg ICAgICAgICAgICAgPC9kaXY+CiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPSJib2R5Ij4KICAg ICAgICAgICAgICAgICAgICA8cD5GbG9hdGluZyB0ZXh0PC9wPgogICAgICAgICAgICAgICAgICAg IDxwPkZsb2F0aW5nIHRleHQ8L3A+CiAgICAgICAgICAgICAgICAgICAgPHA+RmxvYXRpbmcgdGV4 dDwvcD4KICAgICAgICAgICAgICAgICAgICA8cD5GbG9hdGluZyB0ZXh0PC9wPgogICAgICAgICAg ICAgICAgICAgIDxwIGNsYXNzPSJ0b2dnbGFibGUtaXRlbSIgaWQ9InRvZ2dsZS1lbGVtZW50Ij4K ICAgICAgICAgICAgICAgICAgICAgICAgTG9uZ2lzaCB0ZXh0PGJyPgogICAgICAgICAgICAgICAg ICAgICAgICBMb25naXNoIHRleHQ8YnI+CiAgICAgICAgICAgICAgICAgICAgICAgIDwhLS0gSWYg dGhlIHRleHQgYWx3YXlzIGZpdHMsIG5vIHByb2JsZW0gLS0+CiAgICAgICAgICAgICAgICAgICAg ICAgIExvbmdpc2ggdGV4dDxicj4KICAgICAgICAgICAgICAgICAgICAgICAgTG9uZ2lzaCB0ZXh0 PGJyPgogICAgICAgICAgICAgICAgICAgICAgICBMb25naXNoIHRleHQ8YnI+CiAgICAgICAgICAg ICAgICAgICAgICAgIExvbmdpc2ggdGV4dDxicj4KICAgICAgICAgICAgICAgICAgICAgICAgTG9u Z2lzaCB0ZXh0PGJyPgogICAgICAgICAgICAgICAgICAgICAgICBMb25naXNoIHRleHQ8YnI+CiAg ICAgICAgICAgICAgICAgICAgICAgIExvbmdpc2ggdGV4dDxicj4KICAgICAgICAgICAgICAgICAg ICAgICAgTG9uZ2lzaCB0ZXh0PGJyPgogICAgICAgICAgICAgICAgICAgICAgICBMb25naXNoIHRl eHQ8YnI+CiAgICAgICAgICAgICAgICAgICAgPC9wPgogICAgICAgICAgICAgICAgPC9kaXY+CiAg ICAgICAgICAgIDwvZGl2PgogICAgICAgIDwvZGl2PgogICAgPC9ib2R5PgogICAgPHNjcmlwdD4K Y29uc3QgZWxlbWVudCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCJ0b2dnbGUiKQplbGVtZW50 LmFkZEV2ZW50TGlzdGVuZXIoImNsaWNrIiwgZnVuY3Rpb24oZXZlbnQpIHsKICAgIGNvbnNvbGUu bG9nKCJjbGljayIpCiAgICBjb25zdCBibG9jayA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCJ0 b2dnbGUtZWxlbWVudCIpCiAgICBibG9jay5jbGFzc0xpc3QudG9nZ2xlKCJzaG93IikKfSkKICAg IDwvc2NyaXB0Pgo8L2h0bWw+ 464259 2022-12-30 07:50:18 -0800 2022-12-30 07:50:18 -0800 Test reduction 249848.html text/html 551 zalan PHN0eWxlPgouY29udGFpbmVyIHsKICAgIHBvc2l0aW9uOiBmaXhlZDsKICAgIGJvcmRlcjogMXB4 IHNvbGlkIGJsYWNrOwogICAgd2lkdGg6IDIwMHB4OwogICAgaGVpZ2h0OiAyMDBweDsKICAgIG92 ZXJmbG93OiBzY3JvbGw7Cn0KCi5jb250cm9sIHsKICAgIHBvc2l0aW9uOiBmaXhlZDsKICAgIG1h cmdpbi10b3A6IDUwcHg7CiAgICBiYWNrZ3JvdW5kLWNvbG9yOiBibHVlOwogICAgd2lkdGg6IDEw MHB4OwogICAgaGVpZ2h0OiA1MHB4Owp9CgojZXhwYW5kX3RoaXMgewogIHdpZHRoOiAxMDBweDsK ICBoZWlnaHQ6IDUwcHg7CiAgYmFja2dyb3VuZC1jb2xvcjogZ3JlZW47Cn0KPC9zdHlsZT4KUEFT UyBpZiB0aGUgYmx1ZSBib3ggaXMgbm90IGF0IHRoZSB0b3AuCjxkaXYgY2xhc3M9Y29udGFpbmVy PgogIDxkaXYgY2xhc3M9ImNvbnRyb2wiPjwvZGl2PgogIDxkaXYgaWQ9ZXhwYW5kX3RoaXM+PC9k aXY+CjwvZGl2PgoKPHNjcmlwdD4KZG9jdW1lbnQuYm9keS5vZmZzZXRIZWlnaHQ7CmV4cGFuZF90 aGlzLnN0eWxlLmhlaWdodCA9ICI1MDBweCI7Cjwvc2NyaXB0Pgo=