Bug 186419 - REGRESSION (Safari 11.1.1?): Absolutely-positioned element containing text and replaced element with a max-width in % overflows
Summary: REGRESSION (Safari 11.1.1?): Absolutely-positioned element containing text an...
Status: RESOLVED INVALID
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari Technology Preview
Hardware: All All
: P2 Major
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2018-06-07 17:11 PDT by Benoît Rouleau
Modified: 2022-06-13 09:18 PDT (History)
6 users (show)

See Also:


Attachments
HTML reproducing the issue (514 bytes, text/html)
2018-06-07 17:11 PDT, Benoît Rouleau
no flags Details
Safari 15.5 matches other browsers (339.13 KB, image/png)
2022-06-12 18:44 PDT, Ahmad Saleem
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Benoît Rouleau 2018-06-07 17:11:31 PDT
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.
Comment 1 Alexey Proskuryakov 2018-06-08 11:01:55 PDT
Thank you for the report!

For better prioritization, can you share which existing websites or apps this affects?
Comment 2 Radar WebKit Bug Importer 2018-06-08 11:02:14 PDT
<rdar://problem/40943176>
Comment 3 Benoît Rouleau 2018-06-09 12:28:28 PDT
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.
Comment 4 Benoît Rouleau 2018-11-26 15:48:36 PST
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
Comment 5 Benoît Rouleau 2018-11-26 15:51:11 PST
My bad, this quote is from Tab Atkins, not Fantasai -_-
Comment 6 Ahmad Saleem 2022-06-12 18:44:44 PDT
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!
Comment 7 Benoît Rouleau 2022-06-13 09:18:38 PDT
Yep, looks like other browsers aligned with Safari since I created this report. So Safari was right! :) Marking as RESOLVED INVALID.