In Thematic, but not in Coraline, fonts are displaying weird in Webkit

ThemeShaper Forums » Thematic

[closed]

In Thematic, but not in Coraline, fonts are displaying weird in Webkit

(17 posts)

Started 1 year ago by nimmolo
Latest reply from nimmolo
This topic is not resolved

Tags:

nimmolo
Member
I'm trying to migrate a site I did in Coraline to Thematic, just because! ... but also because Thematic gives me more hooks for modifying the mobile version of the site. But something weird is happening to the desktop version of the site in Chrome and Safari and it's a total dealbreaker.

Fonts are dimming strangely and losing subpixel-level smoothing in Webkit browsers. At many font sizes it's not at all cool or legible.

Initial webs research indicates this might be because of js superfish menus, or perhaps other javascript, and the js's interaction with flash videos or perhaps other videos. The video content I can't get rid of, so I'd like to try disabling the superfish quickly to troubleshoot it. ** UPDATE **

I did disable superfish and all the head_scripts using Helga's code from the Menu sticky. Problem persists.
```
// Filter away the default scripts loaded with Thematic
function childtheme_head_scripts() {
    // Abscence makes the heart grow fonder
}
add_filter('thematic_head_scripts','childtheme_head_scripts');
```
The Thematic sandbox version with font-weirdness is andrewnimmo.com/mistersaturdaynight
The Coraline live site, for NON-font-weirdness comparison, mistersaturdaynight.com

Driving me absolutely bonkers. :/
Posted 1 year ago #
nimmolo
Member

Update: The only js being loaded is now the minimum jquery library from

http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js?ver=3.3.1

Not sure how to disable this since it's not called from header-extensions.php

Posted 1 year ago #

nimmolo
Member

An old post from Chris proposes this but it seems a bit old for the purpose, since we're on 1.6!

function swap_jquery() {
	wp_deregister_script('jquery');
	wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"), false, '1.3.2');
	wp_enqueue_script('jquery');
}
add_action('init', 'swap_jquery');

I just tried the
wp_deregister_script('jquery');
part but it did not deregister the script.

Posted 1 year ago #

helgatheviking
Moderator

can you point out what part looks bad? the sites look the same to me in chrome at a cursory glance.

Posted 1 year ago #
nimmolo
Member
so Helga - It's only in webkit browsers on Mac, AFAI can tell, and it's ONLY on pages with embedded video iframes. Mac Firefox renders the text fine, even in the presence of the embedded video.

The below pages have video embeds and show the problem clearly. If you watch carefully while the pages load, you can probably see the text switch from robust (normal) rendering to "dim" - no subpixel font smoothing. It looks to me like the difference between
```
-webkit-font-smoothing: subpixel-antialiased;
```
and
```
-webkit-font-smoothing: antialiased;
```
...i'm using this as an independent example: maxvoltar.com/archive/-webkit-font-smoothing
Posted 1 year ago #
nimmolo
Member

Anyway here are the pages with videos where the font gets dim:

makanipower.com/why-airborne-wind/

andrewnimmo.com/mistersaturdaynight/

and in the respective sites above, these two pages don't have videos and don't dim:

/faq/

/mistersaturdaynight/2009/09/justin-carter-2/

Sorry not to post the full link - the bbpress is deleting the entire post if i do!

Posted 1 year ago #
nimmolo
Member

I've seen people proposing jquery conflicts but on andrewnimmo.com i've unregistered all javascripts in the head, disabling my js menus for example. (WP still loads the one for jquery itself from the googleapis.)

Curiously the problem is not replicated on the live version of the second site, mistersaturdaynight.com/
which uses Coraline theme. The two sites with problems are running on Thematic.

This is, by the way, a re-post of my contribution to someone else's thread on this same topic on stackoverflow, you can check out his example of what seems to be the exact same problem (and it's not on a wordpress site):

stackoverflow.com/questions/9516319/embedding-youtube-video-changes-font-look-on-elements-outside-the-iframe/9661095#9661095

Still, since my prob occurs in Thematic and not Coraline, I thought I might bring it up here.

Posted 1 year ago #
nimmolo
Member

Sorry for breaking that into multiple posts, I must have had a gremlin in there somewhere and it just - w o u l d n ' t - post, since last night!

Posted 1 year ago #
helgatheviking
Moderator

WP does not load jquery from googleapis by default(instead it serves a locally-hosted version). i'm not sure thematic even enqueues jquery.

ugh, hate those mac bugs. don't understand them since safari is supposed to be the same!!

have you disabled all plugins?

Posted 1 year ago #
nimmolo
Member

Right! I'll do that when I get home.

That's prolly where the js is coming from

...uh, all this and Olympic handball!?!?

Posted 1 year ago #
helgatheviking
Moderator

well team USA did not qualify so i'm pretty free. ;) this is what i do when i am procrastinating working on my own stuff... or designing my own site.

Posted 1 year ago #
nimmolo
Member

Well, I appreciate the procrastination.

OK - Update 1: at andrewnimmo.com, I've gotten rid of all the javascript on the page, although not all the plugins yet, and there's still jagged fonts.

Also, I just checked the source and mistersaturdaynight.com, which looks fine, does load some javascript, and plenty of iframes.

So my theory seems wrong. But I haven't turned off all the plugins, and now i will.

Update 2 - All plugins off at andrewnimmo.com and now still jagged fonts. Even after quitting and restarting safari or chrome.

Posted 1 year ago #
nimmolo
Member

Update 3 - One full hour of searching stackoverflow threads about webkit font smoothing weirdness and NONE of the proposed CSS solutions, from shadows to strokes, worked. ARRGH!!!!

Posted 1 year ago #
middlesister
Member

This seems weird. I am on a mac, but I can't see it. These pages look exactly the same to me in both Firefox (10.0.2), Safari (5.0.5) and Chrome (17.0.963). Even when resizing the window, the fonts look crisp and legible.

I am still using Leopard though. And both -webkit-font-smoothing: subpixel-antialiased; and -webkit-font-smoothing: antialiased; look the same, for example on the page http://files.christophzillgens.com/webkit-font-smoothing.html . The two right columns are not showing a difference at all, unlike the screenshots on the maxvoltar.com page.

Is it possible that this has less to do with webkit but more with the OS? Are you using Lion or Snow Leopard? Is it possible that there is some kind of special font hinting features/setting in Lion that are messing things up?

Posted 1 year ago #
helgatheviking
Moderator

i thought those macs were supposed to be so easy and so intuitive? (i don't have any special love for windows, but couldn't resist a dig)

Posted 1 year ago #
nimmolo
Member

Hi Middlesister - using Snow Leopard here. Good question!

Hmmm. Just checked it with and without the (in system prefs Appearance panel) "Use LCD font smoothing when available" and there was no change.

Is that an option in Leopard? I forgot.

Posted 1 year ago #
nimmolo
Member

Helga

yeah, that's what's so exasperating, it's making my mac look like a windows machine!! :)

Posted 1 year ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.