| Summary: | Elements with border, position: absolute and aspect-ratio: 1 are not square | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Alex Reid <alex.reid> |
| Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW --- | ||
| Severity: | Normal | CC: | bfulgham, karlcow, sgill26, simon.fraser, webkit-bug-importer, zalan |
| Priority: | P2 | Keywords: | BrowserCompat, InRadar |
| Version: | Safari Technology Preview | ||
| Hardware: | Mac (Apple Silicon) | ||
| OS: | macOS 14 | ||
| See Also: |
https://bugs.webkit.org/show_bug.cgi?id=267625 https://bugs.webkit.org/show_bug.cgi?id=265243 https://bugs.webkit.org/show_bug.cgi?id=264043 https://bugs.webkit.org/show_bug.cgi?id=244697 |
||
| Attachments: | |||
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
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
|
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)