I have a set of images that work perfectly since I have created this element in all browsers, but I have updated Safari Yesterday to ( Version 14.0 (15610.1.28.1.9, 15610) ) and all goes wrong. CSS GRID is stretching. In other browsers CSS Grid work as expected.
In my case it was changing img height from 100% to none (auto) but keep width 100%. I have to mention that I have set on these images object-fit in custom CSS. I need to go back to it later to see a new Safari specifications. I found also next issue as I have set custom list-style
that is also ignored with new Safari version and showing only standard dot. I thing there are coming a new rules for accepted HTML entities forms but didn’t have time to read about that. Like I’ve said when will be time I need to look into Safari Specs to see what is going on.
If you want to keep 100% width and height when you set your images to cover-fit (which is pretty much the whole point of cover-fit) and not have it stretch vertically in Safari, set the width to 100% and the height to Auto. Then set the min-height to 100% and leave the min-width alone (auto). For some reason, Safari respects these settings but not a height setting of 100%. Go figure.