Neither the Live Website nor the Designer rendering as expected in Safari

[Jeandcc (Jean Costa)]

Hello Webflow Ninjas. Please, help me out as this is holding the website back from being released:

If I open the Brands Partnerships page on Google Chrome or Edge, it shows as it should be. If I open the designer, it also appears correctly, just like this:

However, if I open the website or the designer ON SAFARI, the content goes crazy and go all the way up, just like this:

I really think this is a bug. Everything looks just fine from the designer. Any help?

Thank you in advance

---

Here is my site Read-Only: LINK

[cyberdave (Dave Sloane)]

Hi @Jeandcc, thanks for the post. I can see that you are using Grid on the elements in the brand section and have the brand section set to display flex, I would set that instead to display block:

Also, I would try to avoid using negative margins and where you have top margins, use padding instead to reduce the amount of white space that is rendered on the page.

After updating the safari rendering is updated.

The rendering can sometimes be different on safari on desktop than iOS safari and from what I can tell, there is a lot of white space in the design on that page, which will render unpredictably, thus one reason to try to eliminate all unnecessary white space.

Also, having a grid styled element in a flex container may render differently in Safari than in other browsers, it is one thing that need to be checked when doing cross browser testing to adjust the styles so the page renders the same way on all browsers.

I hope this helps

[Jeandcc (Jean Costa)]

Thank you for your input. I will take that in consideration Dave. It just got me wondering why things looked ok on every browser but Safari on Desktop. If I were to use my iPad’s Safari, things would look correct.

I’m also going to test it out and let you know the result.

It is working @cyberdave! You rock! Thank you so much.