Streaming live at 10am (PST)

CSS Grid stretch in Safari after yesterday's update

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.

Anyone with identical experience?

Ok I have find where was a problem

I’m having the same issue. Any suggestions?

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

ul{
list-style-position: outside;
list-style-type: "\2014     ";
}

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.

1 Like

thank you. I think my issue was related to having flex-align set to stretch.

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.
Screen Shot 2021-06-07 at 11.37.26 AM

2 Likes