I am currently have a problem with and ease down code. currently it is set as:
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!
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.
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:
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:
-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.
Thanks again for all the help!
You must be logged in to reply to this topic.