Safari rendering things differenly

Design help General
1

I’m having some issues with some elements in my website are showing up for only Safari (both Desktop and mobile). Text in my blog seems to randomly double up on top of each other, and divs seems to arrange themselves in different orders, ignore sizing rules and take on the wrong backgrounds. I’ve attached examples of what it currently looks like, and what it’s meant to look like.

360×640 131 KB
750×1334 236 KB
360×640 118 KB

https://preview.webflow.com/preview/tribeca-financial?preview=a3492617512ed85dc710851e1132d244

Here’s what they SHOULD look like

359×870 200 KB
371×849 153 KB
1180×871 605 KB

Here is my public share link: Webflow - Tribeca - Melbourne Financial Advisers

2

Hi,

I’m experiencing almost the same issues with my site.

It looks perfect on the Pc with Chrome Browser at any size and on my Android Nexus6p but trouble on iPhone and Sms Galaxy.

On this site, I’m using the “flex” component which seems that struggling on responsive to completely different sizes.

Please see attached screenshots from iPhone 6S, Sams Galaxy 7S and Nexus 6P

iPhone

623×1107 81.2 KB

Galaxy

623×1107 102 KB

Nexus 6P - perfect

397×719 165 KB

.

3

Same here.
Lots of issues with Safari (I have a small white space at the bottom of my site on Safari, but looks fine on every other browsers, seems to be an issue with the VH unit)

4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.