Bug 272527

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:

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:

Description	Flags
A simple page that reproduces the issue	none
Screenshot of behaviour on Safari Technology Preview Release 192 (Safari 17.4, WebKit 19619.1.8.1)	none
Screenshot of behaviour on Firefox 124.0.2	none
rendering in safari, firefox, chrome	none
more reduced testcase	none

Alex Reid

Reported 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)

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 attachment proposed patch, testcase, etc.

Alex Reid

Comment 1 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)

Alex Reid

Comment 2 2024-04-11 08:08:59 PDT

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

Radar WebKit Bug Importer

Comment 3 2024-04-11 12:31:38 PDT

<rdar://problem/126292577>

Karl Dubost

Comment 4 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

Karl Dubost

Comment 5 2024-04-11 18:45:28 PDT

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

Karl Dubost

Comment 6 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

Karl Dubost

Comment 7 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.

Karl Dubost

Comment 8 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

Note You need to log in before you can comment on or make changes to this bug.