Safari flexbox - misalign overlay

Design help General
1

Hi,

I am using flexbox in a rather complex way - text is meant to overlay images (plus all items central align)
It worked fine on Chrome/Firefox - but Safari pushes the text below the images.

Has anyone experienced this problem - and found a solution?

I have opened webflow designer on Safari and tried to solve…but now this has rendered all browsers with this error…and can’t find the fix…

also…i’m thinking about an alternative solution incase theres no solve - but stuck for this too - does anyone know how to allow a div to inherit the background image dimensions?..this would mean text ‘technically’ wouldn’t have to overlay image…just sit in a div with a background image…so I mean not a fixed width and height div so I can use different size images on CMS…

Here is my public share link: LINK

Heres what the error looks like on Safari

2880×1800 712 KB

Here’s what its should (and used to) look like on chrome

2880×1800 680 KB

2

Hey @Rowena

So, I was looking at your design and it is a really complex structure. So, I made a quick video explaining how you can fix the design. Again, please try to do it in Safari to make sure it works across all browsers.

Here’s the video:
https://cl.ly/3J3R0F2h2C14/Screen%20Recording%202017-05-18%20at%2007.44%20PM.mov

​Hope this is helpful.

3

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