Bug 272527 - Elements with border, position: absolute and aspect-ratio: 1 are not square
Summary: Elements with border, position: absolute and aspect-ratio: 1 are not square
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari Technology Preview
Hardware: Mac (Apple Silicon) macOS 14
: P2 Normal
Assignee: Nobody
URL:
Keywords: BrowserCompat, InRadar
Depends on:
Blocks:
 
Reported: 2024-04-11 08:00 PDT by Alex Reid
Modified: 2024-04-14 20:33 PDT (History)
6 users (show)

See Also:

Attachments
A simple page that reproduces the issue (1.67 KB, text/html)
2024-04-11 08:00 PDT, Alex Reid 		no flags Details
Screenshot of behaviour on Safari Technology Preview Release 192 (Safari 17.4, WebKit 19619.1.8.1) (422.46 KB, image/png)
2024-04-11 08:06 PDT, Alex Reid 		no flags Details
Screenshot of behaviour on Firefox 124.0.2 (414.95 KB, image/png)
2024-04-11 08:08 PDT, Alex Reid 		no flags Details
rendering in safari, firefox, chrome (270.63 KB, image/png)
2024-04-11 18:39 PDT, Karl Dubost 		no flags Details
more reduced testcase (518 bytes, text/html)
2024-04-14 20:21 PDT, Karl Dubost 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Alex Reid 2024-04-11 08:00:10 PDT 
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)
Comment 1 Alex Reid 2024-04-11 08:06:24 PDT 
Created attachment 470865 [details]
Screenshot of behaviour on Safari Technology Preview Release 192 (Safari 17.4, WebKit 19619.1.8.1)
Comment 2 Alex Reid 2024-04-11 08:08:59 PDT 
Created attachment 470866 [details]
Screenshot of behaviour on Firefox 124.0.2
Comment 3 Radar WebKit Bug Importer 2024-04-11 12:31:38 PDT 
<rdar://problem/126292577>
Comment 4 Karl Dubost 2024-04-11 18:39:45 PDT 
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
Comment 5 Karl Dubost 2024-04-11 18:45:28 PDT 
Similar 
* Bug 267625
* Bug 265243
* Bug 264043 (duplicate)
* Bug 244697
Comment 6 Karl Dubost 2024-04-11 18:47:57 PDT 
Probably some things to explore into 
https://wpt.fyi/results/css?label=master&label=experimental&aligned&q=aspect-ratio%20safari%3Afail
Comment 7 Karl Dubost 2024-04-14 20:21:48 PDT 
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.
Comment 8 Karl Dubost 2024-04-14 20:33:16 PDT 
Removing the aspect-ratio: 1 / 1

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

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