I noticed recently that when viewed in Safari my blog's text seems to be rendering rather jagged and overly thin. I'm not seeing this in any other browsers though and it seems to be a recent issue in Safari. Curious if anyone had any thoughts on how to fix this. Any insight would be helpful.
Note: I am aware that I need to move to a child theme and have been working on transitioning off of the modified version of Thematic that I am currently running to a child theme.
well...my opinion is its a browser issue. At least on my monitor, IE has the best text rendering, then opera, then chrome, with ff and safari dead last.
Even Cufon fonts look like S*** in safari for windows.
it's a interesting thing though bc other sites using a very similar type setup to mine render fine. I guess this is motivation the rework it so it looks good for everyone.
I'm having the same issue with the thematic theme and the "featured site" child activated. Safari's (on a Mac) text rendering looks awful when there is a (YouTube and/or Vimeo) video embedded in the post. If I remove the video embed, the text returns to normal. On pages where there is no video, the text looks fine. In Chrome and FF the text renders as it should regardless of embedded video or now.
If I do a quick theme swap, the rendering issue goes away. Strange. Aside from tweaking fonts (different family, etc) in the CSS, not sure how else to hunt this down.
Just had a client make this same observation, so I suppose its time to take this more seriously, and thanks erik for the additional info.
Thematic's built-in stylesheets as well as the featured-site theme stylesheet specify font-size in pixels instead of em's. I havn't tested this, AT ALL, but em's tend to display better in many circustances/browsers. I am about to convert a featured-site based child-theme to em's, once its done i'll take a hard look at this like erik did, comparing original featured-site to em converted font-size site, and to a default thematic site to a non thematic site, to see what's what. If i can i'll post this stuff live so we can all eyeball it.
well, i was full of s* on that one. Just converted everything to em and...nothing. Only thing I learned was that converting from px to em is a pain in the ass.
Can't say I'm seeing a dramatic quality difference either way, safari and ff just seem to have less antialiasing, if thats the right term....things are more "rough around the edges".
I can't see how this could have anything to do with thematic though. How would a bunch of php have anything to do with font rendering?
Has this been resolved or solved? I've got the same exact issue. And like the previous Erik mentioned, it only happens when there is a YouTube clip embedded in a post.
A few other times I've noticed this is on MLB.com sites, such as http://sanfrancisco.giants.mlb.com/news/article.jsp?ymd=20101024&content_id=15824810&vkey=news_sf&c_id=sf. The body text where the Flash is embedded looks like crap.
I also noticed that this same issue shows up in CSSEdit's Web Preview.
Erik
buzzwords
Member
I've had the same problem using Safari and Thematic while rendering a page containing an embedded YouTube video. I removed the video and the type throughout the entire page displayed properly. Put it back in and all the type looked faded/jagged. Images looked fine.
jamesbeaudreau
Member
FWIW, I've been researching this problem this afternoon and I believe I've got a fix. First of all, it seems to be a Safari issue. The fix is simply that the embedded object must be in a div that is set to
display: block;
Once I had put my soundcloud embeds in a div with that instruction, the font problem was eliminated.
i was seeing this bug on one of my sites. specifically, on a page with a lot of type rendered in a web font imported using @font-face. i am assuming it is a memory issue or some sort of bug with how the rendering engine handles large amounts of type with a custom font.
in any case, i found a hack that fixed it for me. i added this to the base text selector:
-webkit-text-stroke: 1px rgba(0,0,0,0);
You must log in to post.
