Safari and Chrome display very different version of pages

[Ludheat]

Hi there.

I have an issue where the desktop version (of the site I’m putting together) displays very different in Safari than in Chrome: all the spacing between images is being ignored in Safari whereas in Chrome the pages look correct.

Do you have any idea what could be causing this?

Thanks

Alan

[ruenel]

Hello Alan,

Thanks for writing in!

I can see that the are different in Safari, Chrome and Firefox too. This is because Safari browser translates the negative margins differently. I would recommend that you edit your page, remove the negative margins that you added to the sections and other element. Make sure to add a white background color for the sections too.

Hope this helps. Kindly let us know.

[Ludheat]

Thanks for the information. I have removed the Background Images (these are the lower pictures below the hero) that appear on the main pages) which I had been using with the parallax function and the associated negative margins. I’ve now replaced those lower Background Images on all the pages with a standard image block. With a little bit of padding (Gaps seems to behave differently on Safari and Chrome too) and some Safari specific targeted code on a couple of images, I’ve got Safari and Chrome looking, and behaving similarly though it’s not perfect. What do you think? Thanks for you insight.

All the best

Alan

[rad]

You’re most welcome Alan! Yes, it would require some tweaking since not all browser behaves the same. Even font has slight differences.