Site Rendering Problems on Safari (Mac, iPad & iPhone)

Hi everyone!

I have just handed over a prototype version of a Real-Estate site for a client yesterday and upon testing it in Safari on Desktop, iPad and iPhone devices, the flex box system breaks on majority of the pages.

The footer seems to fall behind content, home listings within the grid pushes upwards and text block elements push together.

I thought it would be a quick fix to adjusting some heights and flex box rules (I.e. Changing some heights of wrappers from “auto” to “100%” and vice versa) however it doesn’t seem to work on any of the layouts.

I understand that Safari is not a preferable browser for a good user experience, however a large portion of visitors to the site (without design backgrounds) won’t understand or have the patience for this.

What do you recommend the best avenue is to resolving this problem?

Here’s the published link http://true-power.webflow.io
Here’s the Designer Share URL: https://preview.webflow.com/preview/true-power?preview=650224b36210e54359b8c42565cf6751

@cyberdave recommended applying width percentages to each of the elements containing content, which I have amended - however any additional elements that come near the dynamic grid list (containing property listings) break and/or fall behind on Safari. (please see screenshots attached)

Many thanks for everyone’s help.

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