I finished a full website design in Safari and suddenly the website displays COMPLETELY differently in Chrome. I don’t even know where to begin to resolve, looking for someone with some more coding skills to help.
reset the floating property (⌥+click on the blue Float label)
click on Flexbox in Display Setting
Safari may be your browser of choice to browse the web. However I’d recommend you to design with Webflow using Chrome. Consider it like your development environment. You’ll gain one feature: the Chrome Webflow extension, which brings an eyedropper for colors, it’s very convenient.
A good practice is to apply fixes using Safari, so I’d suggest logging into Webflow with Safari, and apply any changes or corrections to the layout as needed.
Interesting… I don’t understand why though. Maybe that’s coming from the workaround for Flex we found quite some time ago and that is still working (for the cases where you have the last item dropping to next line in a grid of Flex item, on Safari, the workaround is to create the flex property in Safari, then it will stay solid when you switch back to Chrome). But I don’t know about any other issue this workaround is solving.
I’ve been working on and off with multiple designers and the one that are the more reliable are Chrome and Canary imho. It’s also the ones that are the most comfortable to work with when you often use Inspect in the Designer Preview mode.
Maybe our opinions are the same actually. Here I didn’t bring the idea that making or fixing something inside of Safari can be a good idea, because it wasn’t the solution here. (issue here was a mix of undesired settings, and I didn’t provide a fix but another design solution for the layout).
The Safari Flexbox bug is very weird. If you do it in Safari, it will work. Do it in Chrome, then it bugs in Safari. But the code will be the same for both tries.
Try not to use float, at all, if you don’t absolutely know what the effects will be. In 99.9% of the case you don’t need float, prefer using box, inline-box or Flexbox in combination with positioning.
float doesn’t only have effect on the element itself but also on the flow of elements, on what’s after. It can make a little mess.
To add to Vincent’s post, float is mostly an outdated technique now since you can indeed achieve virtually anything you may ever need floats for without using it.