Safari Stretching Flex-Box

Hello! I am having an issue with the Safari browser. It is stretching my image outside of the my container. It’s only happening within Safari. I can fix the issue by setting a max width or height but then the whole design of this section falls apart and looks bad.


Here is my site Read-Only:

https://preview.webflow.com/preview/spark-ponys-good-site?utm_medium=preview_link&utm_source=designer&utm_content=spark-ponys-good-site&preview=ab29f49a3d8176a79072a1ea9ae5180f&workflow=preview

Here is the site live:

The section I am talking about is below:


Hey from Ontario! :wave:

I tried to replicate the issue in Safari and couldn’t (see screen grab)—so I’m unsure if you’ve already solved it.

In your read-only, I noticed that .service-feature_image-wrapper is set to display: flex, but it doesn’t have to be.

If I were coding this, I’d set .service-feature_image-wrapper to display: block (default), keep your 4rem padding, and then set the .services_image to width: 100%, height 100%, fit: contain (as opposed to cover).

That way you avoid any unwanted flex behaviour whilst ensuring the image displays in full.

Hope this helps! (Again… I couldn’t replicate the issue, so maybe this is a solution in want of a problem!)

Have a wonderful day,
Colin

Hello @ColinSimmons I did fix the problem but I will also keep that fix in mind. I am still wrapping my head around how certain displays can function. I might ever revise my fix if this works better than my workaround.

Thanks so much!

Michelle