Bug 82645 - SVG as background to div not sized correctly
Summary: SVG as background to div not sized correctly
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: 528+ (Nightly build)
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
Keywords: InRadar
Depends on:
Reported: 2012-03-29 12:48 PDT by Stephen Chenney
Modified: 2022-07-15 15:19 PDT (History)
9 users (show)

See Also:

Main html file (167 bytes, text/html)
2012-03-29 12:48 PDT, Stephen Chenney
no flags Details
SVG to use as background (134 bytes, image/svg+xml)
2012-03-29 12:49 PDT, Stephen Chenney
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Stephen Chenney 2012-03-29 12:48:45 PDT
Created attachment 134646 [details]
Main html file


When SVG content is used as the background for another element (say a <div>) it should fill the entire shape, even if it breaks aspect ratio. This worked properly in Safari 5.1.2 but no longer works in trunk Safari or Chrome. No doubt this is related to all other other resizing problems we currently have. This bug is to track and confirm this aspect of sizing behavior.
Comment 1 Stephen Chenney 2012-03-29 12:49:17 PDT
Created attachment 134647 [details]
SVG to use as background
Comment 2 Nikolas Zimmermann 2012-03-31 06:20:04 PDT
Interessting, when removing background-size: 100% 100% it works as expected.
I'm not sure whether I handled background-size correctly in the intrinsic sizing algorithm, which dates back to CSS 2.1, background-size is CSS3 stuff.
Comment 3 Ahmad Saleem 2022-06-16 17:01:32 PDT
I am able to reproduce this bug in Safari 15.5 on macOS 12.4 using following test case:

Link - https://jsfiddle.net/DXT8b/3/

It is from this bug on Blink (Chrome) side - https://crbug.com/110195

Based on Chrome bug documentation, it was a spec clarification issue and was later fixed and behavior was aligned with Firefox behavior.

It was fixed within Blink in following commit - https://chromium.googlesource.com/chromium/src.git/+/ad443bcef2f7386e432e5c621e78640d91ef2e95

Comment 4 Brent Fulgham 2022-07-15 15:19:29 PDT
Works in Chrome and Firefox. Fails in Safari.
Comment 5 Radar WebKit Bug Importer 2022-07-15 15:19:41 PDT