Grow your CSS skills. Land your dream job.

Ease Action Causes Text Flash

  • # December 19, 2012 at 12:12 pm

    I am currently have a problem with and ease down code. currently it is set as:

    .ease:hover {
    -webkit-transform: translateY(.5em);
    -moz-transform: translateY(.5em);
    -o-transform: translateY(.5em);
    }
    .easeup:hover {
    -webkit-transform: translateY(-.5em);
    -moz-transform: translateY(-.5em);
    -o-transform: translateY(-.5em);
    }

    The code works fine in Firefox and Chrome, but the text flashes in Safari and does not even work in IE. Here is a link to the problem page: [Photography](http://www.scotthudsonphotography.com/SHP/about.html “Photography”)

    The code is used for the links at the top and bottom and the text flash is in the body. If you want to whole css I can post that as well.

    Thanks for the help!

    # December 19, 2012 at 1:57 pm

    For IE9 you need the `-ms` prefix and for IE10 (and newer Firefox and Opera) you don’t need any prefix, which you seem to be missing.

    # December 19, 2012 at 2:13 pm

    This is essentially this huge bug in WebKit. I’d call it a bug anyway. You can apply the “thinned out” text look by applying a benign 3D transform to the area with text. That way it won’t jump to that thinned out look on hover. But that’s kind of a crappy fix. Usually you just have to decide what is worse, the thinned out look all the time, or the jump.

    # December 19, 2012 at 2:14 pm

    Yep. totally forgot about that prefix. But idea why the body text flickers in Safari?

    # December 19, 2012 at 2:36 pm

    Thanks Chris, I just had the code in the wrong spot and it seemed to fix the flickr!

    Back to the ease problem in IE, I am unable to get the transition to go slow. Any ideas for that?

    Thanks!

    # December 19, 2012 at 3:04 pm

    @chriscoyier @hudsora – A fix I found for the text thinning bug in Chrome on transitions/transforms was to use;

    * { -webkit-backface-visibility: hidden; }

    # December 19, 2012 at 4:59 pm

    @hudsora
    Cannot reproduce the problem but what you describe sounds familiar. What andy_unleash wrote should fix the problem, but from what I learnt “backface-visibility: hidden” can have some nasty side effects – at least that is what I remember when I gave it a try.

    What I ended up using to fix text-rendering glitches while css transforms/transitions are running is:

    * {
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -ms-font-smoothing: antialiased;
    font-smoothing: antialiased;
    }

    # December 19, 2012 at 5:23 pm

    I’d avoid the antialiasing fix at all cost. I have seen no side effects to using the backface hack.

    # December 19, 2012 at 6:03 pm

    @TheDoc I am sure I had an issue when I tested it, but seems to work fine now (for me)…

    So agreed: When possible use the backface hack :)

    # December 19, 2012 at 7:36 pm

    Hey Guys,
    I was able to fix the text problem by putting this code into my container style: -webkit-transform:translate3d(0,0,0);

    It seems to work great with Safari so I think I will just stick with that (I uploaded the new code, so that is probably why you were not seeing it, Sorry.)

    But to set the transition speed for IE how does one do that? I currently have this:

    .speed {
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    }

    But in every browser except IE the transition is slow, and for IE it just jumps.

    Any ideas?

    Thanks again for all the help!

    # December 19, 2012 at 7:59 pm

    As far as I’m aware (and I could be wrong) -ms prefixes aren’t required for transitions anymore.

    Also don’t forget to include a non-prefixed version of your transitions.

    # December 19, 2012 at 8:07 pm

    @andy_unleash IE9 still needs the prefix.

    @hudsora – you still haven’t added the non-prefixed version for IE10.

    # December 19, 2012 at 8:08 pm

    @TheDoc – IE9 doesn’t support transitions brosef.

    # December 19, 2012 at 8:10 pm

    This whole time I was confident we were talking about simple 2D transforms… /sigh

    # December 19, 2012 at 8:30 pm

    @TheDoc – I think it was originally but then he came back with transitions and then – oh no I’ve gone crosseyed.

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".