Bug 272527 – Elements with border, position: absolute and aspect-ratio: 1 are not square

• Status: NEW
• Component: Layout and Rendering

[Alex Reid]

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)

[Alex Reid]

Created attachment 470865 [details]
Screenshot of behaviour on Safari Technology Preview Release 192 (Safari 17.4, WebKit 19619.1.8.1)

[Alex Reid]

Created attachment 470866 [details]
Screenshot of behaviour on Firefox 124.0.2

[Radar WebKit Bug Importer]

<rdar://problem/126292577>

[Karl Dubost]

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

[Karl Dubost]

Similar 
* Bug 267625
* Bug 265243
* Bug 264043 (duplicate)
* Bug 244697

[Karl Dubost]

Probably some things to explore into 
https://wpt.fyi/results/css?label=master&label=experimental&aligned&q=aspect-ratio%20safari%3Afail

[Karl Dubost]

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.

[Karl Dubost]

Removing the aspect-ratio: 1 / 1

We get for document.querySelector('div').getBoundingClientRect().width

* Safari: 150.203125
* Firefox: 150.21665954589844
* Chrome: 150.203125