Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Transforms cause font-smoothing weirdness in Webkit

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #38882
    nerdland
    Member

    <h3>Update:</h3>
    I just confirmed that it IS a CSS issue. Here’s a reduced test case: http://jsfiddle.net/VazpN/
    Is there ANYTHING I can do other than forcing standard anti-aliasing on EVERY element on the page?
    To be clear, I know there are other ways to get the effect. (Using margin-left rather than transform, etc.) I’m wondering if there’s a way to fix this AND use transforms.

    <h3>Original message:</h3>

    So, I’ve noticed problems similar to this for a while, but it has now manifested itself on my own website. You can see it by going to our site at http://www.socialforces.com or by checking out Wufoo’s site at http://www.wufoo.com. I’ve seen it in other places, but Wufoo is the only other one I can think of offhand.

    Basically, certain JavaScripts seem to cause crazy font smoothing stuff to happen. On Wufoo’s site, they’ve got an image slider/fader at the top of the page, but every time it changes to a new slide, ALL of the text on the page temporarily changes to antialiased font-smoothing. (Rather than subpixel-antialiased) It causes a really jarring experience because if you’ve scrolled down below the image slider, All of the text is basically “blinking” between antialiased and subpixel antialiased every few seconds.

    This is happening on my site now, too. Oddly enough, it was happening on WuFoo’s site for a while before I saw it happen on my site, but alas, it is there now.

    Is there ANYTHING I can do to fix this? (Other than change ALL the text on the page to antiliased — something I’d rather not do.) Has anyone experienced a similar problem?

    #106046
    nerdland
    Member

    Not sure if this belongs in “CSS Combat” or “JavaScript Jungle,” since it seems to encompass both, so I apologize if I’ve miscategorized this.

    #106050
    Smitty
    Member

    This has to do with webkit and css. Webkit for whatever reason likes to make the fonts swap from subpixel to standard antialiasing when doing css transforms. Personally, I’ve found the best way to fix this is to force standard antialiasing on the element which is being transformed.

    To do this, put this on your element you need to style.

    -webkit-font-smoothing: antialiased;
    #106051
    nerdland
    Member

    Yeah, that’s what I’m hoping to avoid. I would be less concerned if it were only the moving element that is swapped to standard antialiasing. The biggest problem is that the WHOLE PAGE is swapped to standard antialiasing when the thing moves.

    #106052
    nerdland
    Member

    I actually just had somewhat of a breakthrough. I was able to pinpoint exactly what causes this behavior in the script I’m using, and it is entirely a CSS issue. Here’s a reduced test case:

    http://jsfiddle.net/VazpN/

    Is there anything I can do to keep Webkit from forcing standard antialiasing on EVERYTHING?

    #106054
    Smitty
    Member

    It appears if you set your transforms to also use

    translate3d( 0, 0, 0)

    it can fix it, but it does cause fonts to be a bit blurry on rotate/transform. See here: http://codepen.io/WillsonSmith/pen/4/2

    #106036
    nerdland
    Member

    I’m not sure what that’s supposed to be doing, because the same issue appears to be happening. (I’m using Chrome 20.0.1132.57 with OSX Lion.)

    http://codepen.io/pen/11208/1

    #106037
    TheDoc
    Member

    I’ve used the translate3d hack before as well.

    #106038
    nerdland
    Member

    Am I seeing something different than the rest of you? The text above the transformed element is still using standard antialiasing while the element transforms, isn’t it?
    http://codepen.io/pen/11208/1

    #106094
    nerdland
    Member

    Is “bumping” frowned upon here? Still can’t figure out this font rendering issue.
    Again, you can see the problem illustrated here:
    http://jsfiddle.net/VazpN/
    http://codepen.io/pen/11208/1

    #106104
    nerdland
    Member

    I have also determined that this issue only happens in OS X. Doesn’t happen on Windows. Not sure about Linux, but I would guess not.

    #141169
    artinruins
    Participant

    I had a similar issue with a page of mine. A simple `:hover { transform: scale(1.1); }` effect was being applied to a button and the text went blurry during scaling, then snapped back to a crisper anti-alias when it stopped (in Safari and Chrome).

    Before using `translate3d(0,0,0)`, in Chrome, the whole background color shifted as the transition happened as well. Very infuriating.

    I added `translate3d(0,0,0)`to the hover effect, as well as `backface-visibility` and that seems to help, though now, the final frame of the effect stays blurry. Better than having the text re-render on animation end, but not great.

    http://dev.projectevolution.com/gunsho/item-store.php and hover on the Purchase button.

    Here is the rendered CSS (from Compass) after getting rid of the duplicate vendor rules:

    .purchase-button {
    transition: 0.3s all ease-in-out;
    transform-origin: 50% 50% 50%;
    backface-visibility: hidden;
    }
    .purchase-button:hover, .purchase-button:focus {
    transform: scale(1.1) translate3d(0,0,0);
    }

    #169259
    zoltan
    Participant

    I have a fix for this. Instead of of just using:

    transform: scale(1.1)
    

    use:

    transform: perspective(1px) scale(1.1)
    

    This will fix this issue in Firefox, Chrome and Safari. You should not put the perspective(1px) transform on the -ms-transform or -o-transform properties, since they don’t recognize perspective().

    I wrote a blog post about this that covers off these issues and more:

    http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/

    Hope this is of some use.

    #193070
    joaomvfsantos
    Participant

    @Smitty I could kiss you man!!

    #207606
    WebDevJoshB
    Participant

    Did you ever find a fix from any of the feedback?

Viewing 15 posts - 1 through 15 (of 17 total)
  • The forum ‘CSS’ is closed to new topics and replies.