Streaming live at 10am (PST)

Webflow in Safari vs. Chrome


#1

Hello friends!

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.

Specifically an issue with the “Blog” page:

Safari Screenshot:

Chrome Screenshot:


Here is my site Read-Only:

https://preview.webflow.com/preview/noearbuds?utm_source=noearbuds&preview=994729bb5b453b06c27c090f1d6a52b2

Feel free to dive into the code, I can’t for the life of me figure out why this is happening but I hope you can!


#2
  1. Select Collection List element
  2. reset the floating property (⌥+click on the blue Float label)
  3. 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.


#3

Funny that in the similar recent topic Nita of Webflow actually suggested safari-first approach so to speak :smiley:


#4

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.


#5

Oh I agree. Just thought it was amusing, seeing two completely different opinions on the problem of safari-chrome relationship.


#6

THANK YOU SO MUCH, you solved my issue!


#7

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.


#8

Glad it helped.

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.


#9

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.