I’ve got the opposite problem; mine gets bolder in Safari (when looking at the published page) than in the Webflow UI. IMHO it looks better in the Webflow UI than the bolder, published one. Any ideas what to do?
@StevenP What’s the link and Webflow link?
@StevenP Not sure about that one. I don’t see much of a difference…if any.
Chrome WF designer
Chrome on live site
Safari (Mac)on live site
Site looks very nice on both browsers.
No, but have a look at the top slider and the text. There’s a significant difference at least on my machine.
The slider looks great everywhere too; nearly identical across browsers, very readable, weight looks perfect with design. Sorry, I’m not much help on this one I guess. You might try the code and see if it makes things better.
Wish I could be more help but it all looks great from here.
Hmm…weird…what OS are you on?
Mac OS, Yosemite… seriously it looks very nice. Maybe someone else will chime in with what they see. Give it a look on Browserstack. If you aren’t a user they have a free/temporary plan. Maybe that will give you an idea.
Hmm…me too. I thought it maybe were a rendering alteration between different OS’s. I’ll check Browserstack out! Danke schön!
Good luck! Let me know what you find out.
So I fixed my problem with applying:
body {
-webkit-font-smoothing: subpixel-antialiased;
}
Now my font is consistent on every browsers.
-webkit-backface-visibility: hidden;
Which was added to the code to solve an animation problem per this answer: iphone webkit css animations cause flicker
Don’t know how to solve the font and solve the flicker, but I can at least choose which one to solve now.
Second, as an avid Firefox/Firebug user, I had tried using Firebug Lite in Safari, as well as another extension for Safari, and they did not work. So, for all of you out there who may be trying to troubleshoot Safari-only issues, here’s a big tip:
Safari’s “Develop” tool. Didn’t know about it at all until I did some searching today, but it’s a menu item in the toolbar. If you don’t see it, then go to Preferences->Advanced, and check the “Show Develop Menu in Toolbar”
With that tool, I was able to troubleshoot and solve this quickly.