Streaming live at 10am (PST)

Help! what has happened to my layout?!


#1

I need some serious, timely help here.

I'm still building the site, so much of the layout is very early -- but my client has requested to see some progress... so I go to check the site and something incredibly wonky has happened with the layout!

It looks like in Chrome everything is as it should be (for now). The spacing and sizing is all how I left it. But Safari is a whole different story. Almost nothing even displays! This is true for Safari on my laptop, iPad, and iPhone. One possible problem I've found is that I'm using svg clip-paths to form hexagonal borders around most of the images. When I remove this code, the images seem to display again on Safari... which is weird because I checked compatibility for this much earlier on in the process and it worked fine before. Also, the margins seem to be offsetting everything to the right...

In Firefox things look a bit better - but again there is the strange issue with the offsetting margins. Is there something weird going on with Flexbox here? It seems strange that Webflow would output such troubling Flexbox functionality, as I've had similar issues like this before on Firefox.

If someone could check how things look in Internet Explorer for me, I'd really appreciate it (I'm on a Mac). I'm almost afraid to know...

Does anyone know what's going on here?? I could really really use some eagle eyes here - and fast! Ahhh!! What's happening??

Thank you!!


Here is my public share link: https://preview.webflow.com/preview/techcells?preview=72746c7c631a2d638861ce06507c62be
(how to access public share link)


#2

Also, the URL is techcells.webflow.io


#3

Hello @TheBeev

The reason for that is because Safari handles flexbox differently than the other browsers (don't ask me why :thinking:)

The solution is to open your project on Safari and fix flexbox elements there.

Let me know if that helps.

Cheers,


#4

http://caniuse.com/#search=flex

I've ran into this problem too. Click on the "Known issues" tab at the bottom of the caniuse.com site and you'll get an explanation


#5

I had never gone through the "known issues" before and now I know why! :raised_hands:

Thanks @PixelGeek :thumbsup:


#6

Thanks for the responses, guys. It appears that Flexbox is definitely the culprit for the wonky layouts in Safari and Firefox. I'd love for someone from Webflow to speak on this matter.... For such an important feature like Flexbox—especially in how Webflow places prominence on its use—it seems it would have much better browser support :confused:

The problem with the svg clip-paths not displaying properly on Safari seems to be a larger issue - one that is not Webflow's fault, of course, since it is custom code. Are you experiencing the issue on your end? I'd like to know if this is fixed in newer versions of Safari.

Also, anyone using IE?

Thank you!


#7

I found the solution to the Safari problem. For anyone who's interested:

It seems this is a weird glitch inherent with Safari in displaying svg clip paths, and it can be solved by adding the "will-change: transform" property to the element.

Sometimes I wish I could punch certain browsers in the face...


#8

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