Font Weight Turns Lighter on MAC/Safari

Font weight turns lighter on Mac/Safari

So I fixed my problem with applying:

body {
    -webkit-font-smoothing: subpixel-antialiased;
}

Now my font is consistent on every browsers.

Font Weight (incorrectly) Lighter in Mac Safari Only

With the comments / prodding from @JukkaK.Korpela, I discovered a few things:

First, the root of the problem is this:

-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.

Lato Font weight appears different between Safari and Chrome on MacOS

As you can see in this Answer: Font weight turns lighter on Mac/Safari

…use

-webkit-font-smoothing: subpixel-antialiased;

to make the font appear in Safari the same as in Chrome (thicker).

…or

-webkit-font-smoothing: antialiased;

to make the font appear in Chrome the same as in Safari (thinner).

Safari changing font weight on bxSlider

So, for this issue, I couldn't find a resolution (aside from leaving things as-is).

I saw one solution that mentioned the browser gets confused with the animations, so text gets rendered improperly. To fix this, you can add a relative position and z-index. The z-index should be higher than the z-index of the class with the animation. After looking, I wasn't able to figure out which class was performing the animation. I tried to add the z-index, but the text just didn't return back to normal.

What I ended-up doing was exactly what I mentioned in the previous post...on .bx-viewport I added -webkit-text-stroke: 0.30px;. I like this solution because the webkit prefix primarily affects the Safari browser (where I'm seeing the issues).

Because I haven't run across anything else that works, I'm going to use this as my solution.

---

Related Topics