I have an issue with the font on Safari on this website . If you click on the icon on the top right of the screen you'll see that the font in the dropdown menu looks weird (thin and blurry).

I think that the issue is caused by the Supersized JS plugin. If you look on another page where the Supersized plugin is not called , the menu looks fine.

Also see here: you can see that issue is occuring only when the first slide is loaded. Weird!

Someone knows what is causing this?

Thanks.

I have an issue with the font on Safari on this website . If you click on the icon on the top right of the screen you'll see that the font in the dropdown menu looks weird (thin and blurry).

I think that the issue is caused by the Supersized JS plugin. If you look on another page where the Supersized plugin is not called , the menu looks fine.

Also see here: you can see that issue is occuring only when the first slide is loaded. Weird!

Someone knows what is causing this?

Thanks.

• javascript
• css
• fonts
• safari
• supersized

• I don't see any difference on my macbook pro retina. – gilly3 Commented Mar 4, 2014 at 20:07
• Hi, it's weird. I edited the post with pictures to show you. I validated the issue on both macbook pro with retina and ipad air. – Leo Stein Commented Mar 4, 2014 at 20:25
• 1 BTW, I see same issue in Safari non-retina, albeit in both Chrome & Firefox on MacBook Air everything looks as on your 2nd screenshot. – nilfalse Commented Mar 4, 2014 at 20:26
• @nilfalse Thanks, it looks like you're right. I was sure it was only on retina! It's looks like it's Safari related. I've edited the post. – Leo Stein Commented Mar 4, 2014 at 20:42
• I don't even see it in Safari, retina or not. Comparison screenshots showing both pages in chrome and safari on my retina display and my non-retina display. – gilly3 Commented Mar 5, 2014 at 0:10

3 Answers 3

Safari on Mac

This problem occurs because you have a visible position:fixed element on the page, and Safari would change the font smoothing to antialiased, making the text look thin and blurry.

Exhibit 1

Visible position:fixed element causing text to look thin.

Exhibit 2

Hide the element and the text bee normal again.

To fix this, you should state the font smoothing explicitly as follows:

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

Exhibit 3

Applying the fix and the issue is gone.

For more information on how position:fixed affects -webkit-font-smoothing, see my answer to another question.

Safari on iOS

On iOS devices however, Safari would blindly apply antialiased to text even when -webkit-font-smoothing is set to be subpixel-antialiased and there are no visible position:fixed elements on the page. To correct for this, you can use -webkit-text-stroke to approximate the looks of the text.

-webkit-text-stroke: 0.5px;

Exhibit 4

Thin and blurry text on iPad.

Exhibit 5

Use -webkit-text-stroke to simulate the original looks of the text.

Try to add:

-webkit-font-smoothing: antialiased;

The easiest way to solve this is changing the font to any web font. Your "v_helv" font is not well supported on safari / chrome. There are a lot of free cross patible browser font on Fontsquirrel

Otherwise, you can change the font type if the web page is openned on web kit browser type by using this code:

@media all -webkit-device-pixel-ratio {
    body{
        font-family: "HelveticaNeue-Light" !important;
        font-weight: 200
    }
}
@media not -webkit-device-pixel-ratio {
    body{font-family: "HelveticaNeue-UltraLight" !important;}
}