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: Webflow - Wifi - Crowne Plaza
Published Version: http://cpgray.webflow.io
Here is my public share link: LINK
(how to access public share link)
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
Hi @mwco, may I ask, what version of safari being used and the operating system? Thanks in advance.
Indeed, it’s Safari Version 9.1 (11601.5.17.1)
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.
Good deal, I’ll stand by. Thank you!
Hi @cyberdave,
I’m noticing that this site does not display properly in the iOS version of Google Chrome. Any ideas?
Thanks,
Matt
@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:
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: Webflow - BIS Entertainment INC
Caniuse, Can I use... Support tables for HTML5, CSS3, etc documents some issues (bugs), i.e. heights with percentages can give problems. I encountered such a problem in my design with flexbox implementation.
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
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.
@Northerner_V1 maybe trying setting the element to 100vh rather than 100% and see if this helps?
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.
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
