I just started coding my own website, and since I love typographic web design I was trying to use a really big custom font for the logo. Unfortunately during my testing on Safari using a MacBook Pro with Retina displays I noticed that there were some artifacts in the font rendering :/ First I thought there was some mistake on my part, but then I discovered that it happens with any font if it is big enough...
This behavior is visible on websites like http://fittextjs.com where the outline of the title is not correctly rendered. For anyone without a retina display here's a screenshot of what I'm talking about http://cl.ly/JL0j
Odd enough this strange bug isn't present on Chrome, and since they're both Webkit based I thought that maybe the latter is using a CSS default that renders text correctly.
Any CSS guru that knows how to solve the situation before me filling a rdar :) ?
UPDATE: I should note that I already tried using -webkit-font-smoothing: antialiased; and it doesn't work :/
I filled a radar about it yesterday and got an answer today (never got a response so fast!).
Apple engineers are aware of it and consider it a serious bug, so I hope it'll get fixed soon. In the meantime there's no workaround available apart from using images :/
Related
I've been using a google font (Varela) for a few years on some times and suddenly I've noticed that for some reason that capitalized words of a size of 12px or smaller seem to now show with an inconsistent height between letters.
This is visible in the footer of this page on a site I made some years back
Just to clarify, yes I've seen other articles on StackOverflow such as this other post but this appears to be somewhat different as that post suggests it's a Chrome specific issue and this doesn't seem to be the case with my problem.
Has anyone experienced something similar ?
Can you check on another desktop in the same network and still the issue persists? Here all the capital are of the same size. If you have installed Varela font on the machine please remove it. I faced this kind of issue. When I uninstalled the font it became normal again and it only happens in Chrome. My machine Windows 10 - Chrome. Maybe Google Chrome gets the font from local machine first whatever CSS you give it rejects it. These are personal experience may be this could help you.
I've got a serious problem on safari browsers with this website
http://daskommunikationsstudio.at/
the problem is that it seems the text is not shown correctly and since i don't own an apple
i've got no real experience with safari.
maybe someone can give me a hint.
thanks a lot
andy
Looks like a font rendering issue. Changed the font-family, eventually you can use different font for Safari.
I should start by saying I'm no expert when it comes to code and web design. That said, I have recently upgraded to OS X 10.9 Mavericks. After updating I'm experiencing a weird bug, specifically on my website and others like it using the wordpress theme WPfolio Two. When you hover over a link, the link jumps and drops to the next line. As soon as you move your mouse away from the linked text the text link hops back up to the line it's supposed to be on. This only happens using Chrome or Safari, it does not seem to happen in Firefox. For an example hover over any link on on either of these two pages http://jasonirla.com/category/news/ or http://notlaura.com/wpfolio-two/read-me/ Thie bug does not seem to effect drop down navigation menus or some (but not all) links in sidebar widget menus.
The bug makes it practically impossible to click the jumping link. I'm not experienced enough to say if this is a browser bug, a OS X bug, a problem with the code in the wordpress them I'm using or what. I am comfortable editing and writing small additions to the theme code using a child theme CSS but in this instance I have no idea where to start or what I'm looking for (to fix). All I know is that this problem did not occur when I was still running 10.8 mountain lion on my mac.
If anyone has any experience with problem like the one I'm experiencing and could offer me some advice I'd really appreciate any help you can offer. I've been searching all over for a week now and haven't been able to find any answers and nothing I've tried seems to make a difference. Thank you for any help or advice you are able to offer.
Can't leave a comment, so I hope this will help you:
Check your font-style on this hover link, is it bold on hover?
Do you use another font-size on hover?
Do you use a iOS compatible font on hover? (using a font that only works on windows systems will be transformed on iOS devices and could cause this bug.
I was contacted by the designer of the WP theme (WPfolio Two), there's a style on 193 of the CSS "display:compact" which is the problem. I put block comments around that line /* display:compact */ and the bug is fixed. Thanks for the initial help #lickmycode – user1544398 just now edit
Got a quick query about some text on my slider on a website I'm making. It's been puzzling me because it only happens in Chrome, when the slide loads it will output the Title from wordpress. As the page loads it renders the font as how it should then a split second later it gets more font weight it seems.
I'm wondering what the issue is?
Just check any of the text on the slides in Chrome. Would be great to know why!
Thanks.
edit* added an image.
known issue in Chrome fixed in latest development builds.
It is a temporary workaround you can also try.
After a little bit of looking around I found that if I add
-webkit-font-smoothing: antialiased;
To my headings it seems to fix my issue. I will mark this as resolved. Thanks everyone.
I've created a Tumblr theme with a somewhat complex background. It renders as coded in Chrome and Firefox but Safari is giving me trouble. Basically the two background images assigned to the body element seem to readjust whenever the viewport dimensions change and when scrolling. It looks really bad, and I've attached a perfect example of the problem below.
Does anybody know what might be wrong here and how to fix it? I know the code is correct, so I think this is a Safari specific bug. The theme is located at http://blog.danielimmke.com/
EDIT: Apparently this issue happens only on the OSX version of Safari. The Windows version renders as coded.