Bug 186419 – REGRESSION (Safari 11.1.1?): Absolutely-positioned element containing text and replaced element with a max-width in % overflows

• Component: CSS
• Status: RESOLVED INVALID

[Benoît Rouleau]

Created attachment 342225 [details]
HTML reproducing the issue

See the attached HTML. I am using a <svg> with a max-width of 100%, but any replaced element with any percentage max-width causes the issue.

Reproduced in:
- Safari 11.1.1 (WebKit 13605.2.8)
- Safari Technology Preview Release 58 (Safari 12.0, WebKit 13606.1.18.2)

I am pretty sure this worked fine in Safari 11.1.

[Alexey Proskuryakov]

Thank you for the report!

For better prioritization, can you share which existing websites or apps this affects?

[Radar WebKit Bug Importer]

<rdar://problem/40943176>

[Benoît Rouleau]

Hi Alexey,
Unfortunately I already fixed it on the website I was working on with a workaround (different HTML structure), and I'm not sure how to look for issues caused by this bug on other websites. But it seems important enough, as many CSS resets have a `img { max-width: 100%; }` rule.

[Benoît Rouleau]

According to Fantasai,

> Yup, that appears to be a bug. See https://drafts.csswg.org/css-sizing/#replaced-percentage-max-contribution for pointers - max-width on the orange element is a cyclic percentage, and so resolves to the initial value (none) for the purposes of finding the max-content contribution, which is used to find the red width.

Source: https://twitter.com/tabatkins/status/1067197407790751744?s=21

[Benoît Rouleau]

My bad, this quote is from Tab Atkins, not Fantasai -_-

[Ahmad Saleem]

Created attachment 460195 [details]
Safari 15.5 matches other browsers

I am not sure on expected results from the attached test case but as can be seen from the attached test case, Safari 15.5 behaves like other browsers (Chrome Canary 104 and Firefox Nightly 103).

Is it something fixed along the lines or something changed in web-spec that they are now aligned with Webkit's behavior. Thanks!

[Benoît Rouleau]

Yep, looks like other browsers aligned with Safari since I created this report. So Safari was right! :) Marking as RESOLVED INVALID.