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??
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
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.
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…
)
