CSS Background Image Not Scaling Properly in Safari 17 with Viewport Units
I'm optimizing some code but I'm working with a perplexing scenario with a background image that doesn't seem to scale correctly in Safari 17. I've set the background image using the following CSS: ```css .section { background-image: url('https://example.com/image.jpg'); background-size: cover; height: 100vh; width: 100vw; } ``` In most browsers, the image fills the section as expected, but in Safari, it appears to be cropped incorrectly, leaving a noticeable gap at the bottom. I'm also using `viewport units` for the height and width, which might be contributing to the question. I tried adjusting the `background-position` to `bottom center` to see if that would help, but it didn't resolve the scenario: ```css .section { background-position: bottom center; } ``` Additionally, I tested with another image just to rule out any image-specific issues, and it produced the same result. I also checked my CSS for any conflicting styles and ensured that there were no `overflow` properties affecting the layout. The site is built with React and styled-components, and I've confirmed it’s not a JavaScript scenario since the layout is static. I’m not seeing any errors in the console, so I’m wondering if this is a known bug with Safari or if there’s something specific in my setup that could be affecting the background scaling. Any insights or solutions would be greatly appreciated. Is there a better approach? What's the best practice here?