ThemeShaper Forums » Thematic

[closed]

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

(17 posts)
  • Started 2 years ago by nimmolo
  • Latest reply from nimmolo
  • This topic is not resolved
  1. 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 2 years ago #
  2. 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 2 years ago #
  3. 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 2 years ago #
  4. can you point out what part looks bad? the sites look the same to me in chrome at a cursory glance.

    Posted 2 years ago #
  5. 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 2 years ago #
  6. 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 2 years ago #
  7. 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 2 years ago #
  8. 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 2 years ago #
  9. 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 2 years ago #
  10. 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 2 years ago #
  11. 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 2 years ago #
  12. 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 2 years ago #
  13. 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 2 years ago #
  14. 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 2 years ago #
  15. 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 2 years ago #
  16. 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 2 years ago #
  17. nimmolo
    Member

    Helga

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

    Posted 2 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.