Ease Action Causes Text Flash

[hudsora]

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!

[TheDoc]

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.

[Chris Coyier]

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.

[hudsora]

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

[hudsora]

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!

[Andy Howells]

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

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

[Qoopido]

@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;
}

[TheDoc]

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

[Qoopido]

@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 :)

[hudsora]

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!

[Andy Howells]

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.

[TheDoc]

@andy_unleash IE9 still needs the prefix.

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

[Andy Howells]

@TheDoc – IE9 doesn’t support transitions brosef.

[TheDoc]

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

[Andy Howells]

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

[Author]

Posts