Created attachment 470863 [details] A simple page that reproduces the issue WebKit sizes elements with aspect-ratio: 1 and a border of non-zero width differently when they are position: static and position: absolute. aspect-ratio should force the elements to be perfect squares, but when position: absolute is applied to an element with fixed height and width auto, the element is distorted horizontally by an amount equal to twice the border width. This does not happen if the width of the element is fixed and the height is auto. Tested in Safari Technology Preview Release 192 (Safari 17.4, WebKit 19619.1.8.1)
Created attachment 470865 [details] Screenshot of behaviour on Safari Technology Preview Release 192 (Safari 17.4, WebKit 19619.1.8.1)
Created attachment 470866 [details] Screenshot of behaviour on Firefox 124.0.2
<rdar://problem/126292577>
Created attachment 470878 [details] rendering in safari, firefox, chrome Safari Technology Preview 192 19619.1.8.1 Firefox Nightly 126.0a1 12624.4.11 Google Chrome Canary 125.0.6413.0 6413.0
Similar * Bug 267625 * Bug 265243 * Bug 264043 (duplicate) * Bug 244697
Probably some things to explore into https://wpt.fyi/results/css?label=master&label=experimental&aligned&q=aspect-ratio%20safari%3Afail
Created attachment 470923 [details] more reduced testcase div { border: 0px solid; position: absolute; background-color: gold; top: 0; left: 0px; height: 100px; width: auto; aspect-ratio: 1 / 1; } document.querySelector('div').getBoundingClientRect().width = 100 document.querySelector('div').getBoundingClientRect().height = 100 div { border: 20px solid; position: absolute; background-color: gold; top: 0; left: 0px; height: 100px; width: auto; aspect-ratio: 1 / 1; } document.querySelector('div').getBoundingClientRect().height = 100 document.querySelector('div').getBoundingClientRect().width Safari: 180 Chrome, Firefox: 140 In addition to the border, twice the width of the border is being added.
Removing the aspect-ratio: 1 / 1 We get for document.querySelector('div').getBoundingClientRect().width * Safari: 150.203125 * Firefox: 150.21665954589844 * Chrome: 150.203125