I built an e-commerce site that works great on Chrome, Edge, and Firefox. I'm getting a very strange bug on Safari that I can't seem to even recreate if I try. The images seem to be randomly distorting. Reloading the page does not solve the issue. If I clear cookies and reload, sometimes the warping goes away and sometimes different images are warped instead. Reloading without clearing cookies does nothing. 75% of the time, the images look fine. I am getting this error in the Safari console but am not sure how to resolve:
Did not parse stylesheet at 'https://website.com/src/index.css' because non CSS MIME types are not allowed in strict mode.
Here is the HTML and CSS of the element. The page is built with React and is getting images via the Commerce.js API. Let me know if I should post more code:
<img
className="product__image"
src={product.image.url}
alt={product.name}
/>
.product__image {
width: 100%;
aspect-ratio: 1/1.2;
-o-object-fit: cover;
object-fit: cover;
}
Below is what the images should (and sometimes do) look like as well as an image of the warping:
