Bug 230045 - In the `inline-block container, SVG set `width: 100%` svg's width should be consistent with`width: auto`
Summary: In the `inline-block container, SVG set `width: 100%` svg's width should be c...
Status: RESOLVED DUPLICATE of bug 257614
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-09-08 08:24 PDT by 709922234
Modified: 2023-07-26 09:34 PDT (History)
7 users (show)

See Also:

Attachments
safari (752.96 KB, image/png)
2021-09-08 08:24 PDT, 709922234 		no flags Details
chrome (39.78 KB, image/png)
2021-09-08 08:25 PDT, 709922234 		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 709922234 2021-09-08 08:24:41 PDT 
Created attachment 437629 [details]
safari

example: https://codepen.io/mantou132/pen/PojWBNg
Comment 1 709922234 2021-09-08 08:25:24 PDT 
Created attachment 437631 [details]
chrome
Comment 2 Radar WebKit Bug Importer 2021-09-15 08:25:29 PDT 
<rdar://problem/83151693>
Comment 3 Ben Frain 2022-09-05 09:13:23 PDT 
This is still problematic and not fixed in the latest technology preview.

Makes it very difficult to add SVG items into headings and the like as if they are part of a flex or grid container, they take up far more width than they should.

Any update on this? Would more examples be useful?

To make the example that has already been provided more obvious, consider this version in Chrome, Safari and Firefox: https://codepen.io/benfrain/pen/oNdgVOY
Comment 4 Ahmad Saleem 2023-07-25 17:44:04 PDT 
Seems to be fixed by PR as well: https://github.com/WebKit/WebKit/pull/16084
Comment 5 Ahmad Saleem 2023-07-26 09:34:48 PDT 

*** This bug has been marked as a duplicate of bug 257614 ***