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?
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.