Site not working in Safari

Design help General
1

This site is in design mode and when I send my client the link to view

https://se-architects.webflow.io/cadmodels

Using Safari, the images are all elongated. It is perfect in Chrome. Any help much appreciated.

Here is my site Read-Only: https://preview.webflow.com/preview/se-architects?utm_medium=preview_link&utm_source=dashboard&utm_content=se-architects&preview=4c668aec352c18e1ec7061320f78f204&mode=preview
(how to share your site Read-Only link)

2

Have you fixed it? Looks ok in safari here.

3

How odd, I will double check with the client. We screen shared this morning and it was definitely off.

4

If you haven’t fixed it and you know it’s bugged from seeing it yourself, it’s still bugged :wink: I’m sorry I can’t be of more help, however I do know that safari is a bit stubborn when it comes to its flex implementation. Chances are that you have the image, its class or its parent set to flex stretch vertically. Safari takes this L I T E R A L L Y and will stretch the image, class or its children to however far down it can go.

5

I have indeed a flex element - damn, that is a pain! I will give it a height, that might cure it!
Thank you.

6

I don’t think it even needs a height. It just needs to not be stretch vertically if I remember correctly.

7

Thanks - that is a pain, flex works a dream for what I am trying to do.

8

Flex is the way to go :wink: If you can flex align center or top that should fix it. Easy button click.

I hope you never have to deal with IE11. That thing barely speaks flexbox and you can forget about grid. It just barely deals with divs and css3.

9

Thanks for that @Ozone. I make a point of telling all my clients how bad IE11 is, right - let’s fix this thing! Many thanks once again.