Bug 82645 – SVG as background to div not sized correctly

• Status: NEW
• Component: SVG

[Stephen Chenney]

Created attachment 134646 [details]
Main html file

http://code.google.com/p/chromium/issues/detail?id=113414

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.

[Stephen Chenney]

Created attachment 134647 [details]
SVG to use as background

[Nikolas Zimmermann]

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.

[Ahmad Saleem]

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

Thanks!

[Brent Fulgham]

Works in Chrome and Firefox. Fails in Safari.

[Radar WebKit Bug Importer]

<rdar://problem/97097117>