CODEWITHSUNDEEP
htmlcsssvgsafarimobile-safari
Dracorex
Dracorex

Reputation: 369

Background image not stretched correctly in Safari

I am using an SVG background image absolutely positioned behind some text and attempting to give it a fluid/variable aspect ratio. It looks as expected in Chrome, Firefox, etc., but in Safari, the image is sized incorrectly. Safari does not stretch the background image to the full width of its element like it should.

I tried replacing the div with the background image with an img tag using object-fit: fill, but the outcome was identical: not stretched in Safari, fine in other browsers.

What can I change about this CSS to make it behave identically in Safari?

Upvotes: 0

Views: 1487

Answers (1)

Dracorex
Dracorex

Reputation: 369

To fix this, I needed to add preserveAspectRatio="none" to the <svg> element in the image file. Safari's default behavior for preserving the aspect ratio for SVG images is different than the default of other browsers. Adding that attribute allowed me to stretch the image to an unnatural aspect ratio.

Upvotes: 3

Related Questions