Gallery Page Flexbox, Broken in Safari fine in Chrome

Hi Everyone,

Relatively new to webflow and been building my agency site over the last few weeks, really enjoyed using webflow, but the more complex the site gets the more bugs seem to pop up!

https://preview.webflow.com/preview/villain?preview=f3f18ce2185fb2063d04bf8db6ef9be4

My WORK page looks great in Chrome and behaves as expected when resizing the screen, although in Safari the same is very much NOT true :confused:

Operating on: OSX Yosemite 10.10.05 and Safari version 10.

If anyone has any suggestions of a fix or a way around I would be super grateful! Worst comes to worst is there a way I could redirect Safari uses to an alternative page design?

thanks and would love to know what you think, :slight_smile:

Paul Giles

Waow the branding is STRONG felicitations. London still great at design isn’t it?

Ok what’s the “gallery”? The case studies pages?

1 Like

Ok I figured it out. It’s the WORK page.

So, there is an issue with Flexbox and Safari. The last item of the first line goes to the line… We’re a lot to experience that.

You have nested several Flex elements, so this bug is affecting you multiple times in the gallery…

What to do.

If you can’t not use flexbox for it, you can try something, redo the gallery from scratch, using different classnames, but this time you do it using Webflow in Safari. Not in Chrome. Make it work inSafari and it will continue to work after even if you continue to design in Chrome afterwards.

If this doesn’t work come back Sorry i don’t have more evident answer to fix it as it is.

1 Like

I’m fairly certain Safari 10 supports Flexbox, so you shouldn’t have any issues. You might try updating your browser.

1 Like

I find that using the default Flex Child Setting of “Shrink if needed” creates many issues on Safari. Might I suggest trying out “expand” or “don’t shrink” settings?

I usually test sites using nested flexbox children on Safari first, figure out any display issues, then it should look good on everything else.

Hope it helps!

1 Like

Thank you! And thank you for getting back to me on this.

I will rebuild if the other suggestions don’t work. First I will update my Safari Browser, then try the ‘shrink if needed’ suggestion. Apologies for the slow reply, time difference means I’m just having breakfast!

Thanks again for all your replies :slight_smile:

Paul

No need to apologize :slight_smile: Where re you from? i’m in Fracne and breakfast was 2 hours ago :slight_smile:

It’s supported. But we are several to have put a bug in evidence.

Haha I’m from London! I’m just at work having my second breakfast (like a hobbit) :slight_smile:

If I hop on a plane to Standstead right now, I’ll miss Elevenses but I can maybe make it for Luncheon. Will there be po-tay-to onion soup? :smiley:

As long as you boil em, mash em or stick em in a stew! (Ironically I’m having a pain au chocolate)… :grin:

First experiment reveals that updated Safari has no effect on the WORK page. If I rebuild in Safari is there a preferred use of dimension unit to use? vw, vh, %, px etc.?

Thanks again,

Paul

Not that I know of it making any difference on that matter.

Unfortunately, this doesn’t seem to help with my problem. Although it may be true.

Safari 10.0.03 is still not reproducing the layout as per in Chrome.

Thanks for your help though! :slight_smile:

Just a little add to this problem…:confounded:

The same is also true for Chrome on iPad! Not sure if this is the same failure to work with Flexbox?

Hmmm if I change the Flex Child Setting to EXPAND it breaks the layout in Chrome. Instead I tried changing it to DONT SHRINK, but this doesn’t have the desired effect in Safari.

Thank you for your suggestion though :slight_smile:

Hi @PaulG super beautiful design!

I took a look and it looks like changing your “B” element in your “Work” page to 40vw for desktop resolves the issue in Safari as you can see in this GIF: Screen Recording 2017-02-02...

Looks like it does not affect the Chrome variation, I’m still looking into whether this is a Bug or expected behavior.

​Please let me know if this is helpful! :bow:

1 Like

You absolute HERO @Waldo!

That seems to have solved it on Chrome on ipad AND Safari!

How did you figure that out?

Thank you so much :smile:

1 Like

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