Flexbox Design Works in Chrome, Breaks Down in Safari

[mwco (Matt)]

Hey there,

I built a page using flexbox, and it displays properly in Chrome, but not in Safari. In Chrome, the boxes rearrange themselves and scale properly as you constrain the viewport. In Safari, the flexbox grid does not react properly in tablet at mobile. (See image and links below)

Read-Only Link: https://preview.webflow.com/preview/cpgray?preview=8c41ecd0190d2382185e48dfd67e9e1b

Published Version: http://cpgray.webflow.io

---

Here is my public share link: LINK
(how to access public share link)

[Diarmuid_Sexton]

Flexbox giving my website issues in Firefox and Internet Explorer also…

This page - http://maccana.webflow.io/clients - renders differently in Chrome, Firefox & Internet Explorer

[cyberdave (Dave Sloane)]

Hi @mwco, may I ask, what version of safari being used and the operating system? Thanks in advance.

[mwco (Matt)]

Indeed, it’s Safari Version 9.1 (11601.5.17.1)

[cyberdave (Dave Sloane)]

Hi @mwco, I am still searching for a solution, but in my testing, safari 9.0.1 shows correctly, but safari 9.1 has broken.

I suspect this is part of an issue with 9.1 specifically, and I am checking with all resources to find out a fix, workaround or correction styling. More info to come.

[mwco (Matt)]

Good deal, I’ll stand by. Thank you!

[mwco (Matt)]

Hi @cyberdave,

I’m noticing that this site does not display properly in the iOS version of Google Chrome. Any ideas?

Thanks,
Matt

[victorcorrea]

@cyberdave same problem here. I’m working with flexbox in some sections of my website. The published version works just fine in Chrome, but it crashes the layout when I run the site in Safari.

See the images below:

(safari)

(chrome)

Interesting thing to notice is that I’m working with flexbox in others parts of the site, and it works properly.

Here is the reading only link: https://preview.webflow.com/preview/bisentertainment?preview=eaaac79b256109b0da2e31d63a4c8309

[rich_art]

Caniuse, http://caniuse.com/#search=flex%20box documents some issues (bugs), i.e. heights with percentages can give problems. I encountered such a problem in my design with flexbox implementation.

[Christopher_Cunetto]

I am having this same problem in iOS Chrome and Version 9.1.1 (11601.6.17) Safari. Specifically this page: http://www.cunettocreative.com/latest

Any updates here?

Share link:
https://preview.webflow.com/preview/cunetto?preview=38f1e95857d6b33ca259fe3ccf61e40a

[Northerner_V1 (Ged Sargent)]

Same problem here. I have a Flexbox element set to 100% height that works as expected in Firefox and Chrome, but whose content is all over the place in Safari. I’m really surprised as I have up until now assumed Safari was a good browser to develop in. I am currently on the hunt for a JavaScript solution that will take out the offending elements in Safari browsers only. Any ideas where I could find a good one?

On another note, I’m keeping my fingers crossed that this bug is resolved in the upcoming Safari 10.

[coolest_vlad (Vlad Radchenko)]

@Northerner_V1 maybe trying setting the element to 100vh rather than 100% and see if this helps?

[Northerner_V1 (Ged Sargent)]

Hi VladimirVitaliyevich - thanks very much for your quick response and kind suggestion!

I actually already tried this earlier today but it doesn’t produce the result I’d like. It works, but it unfortunately fixes the container to a 100vh size, and I need the height to respond dynamically to the div it is nested inside of. I’ve now got a script that detects the browser and removes the elements to simply avoid the problem altogether by setting them to display:none in the CSS. Its not ideal, but it will work fine as a stopgap until the bug is fixed.