Working on a little project using some of the new CSS3 techniques. The problem I’m running into is I have a list item that I am scaling (so transforming), adding a border, and adding a box-shadow to on hover. Everything works as expected however there seems to be an issue with the text in the list item. I don’t know the best way to describe it besides that it seems to “jump” down a pixel or two and almost appears the letter-spacing shifts. If I turn the transition-duration to 0s it goes away but I loose the effect I’m looking for. Has anyone else run into this and know how to fix it?
Lots of things can be going on. Can you provide an example?
The problem is worst in Firefox but also occurs in Safari. The transition is smooth and works perfectly in Chrome. That being said…here is the code (only using the firefox prefix here).
#block li {
-moz-transition-duration: 0.5s, 0.1s;
-moz-transition-property: border, -moz-transform;
-moz-transition-timing-function: ease-out, ease-out;
background: none repeat scroll 0 0 #101115;
border: 4px solid #101115;
color: #FFFFFF;
display: inline;
float: left;
height: 133px;
margin-right: 2px;
padding: 8px;
width: 168px !important;
}
#block li:hover {
-moz-transform: scale(1.1);
-moz-transition-duration: 0.6s, 0.3s, 0.1s;
-moz-transition-property: border, box-shadow, -moz-transform;
-moz-transition-timing-function: ease-in, ease-in, ease-in;
border: 4px solid #039FD9;
box-shadow: 0 5px 10px #000000;
}
Heading 1
Some paragraph text
Heading 2
Some paragraph text
updated the code slightly just to make it easier to see what is going on.
Checked your code …
I have experienced a similar problem with CSS3 transitions and text. It’s probably because Firefox or Safari renders a font differently during CSS3 transforms than Chrome.
Not much you can do about it I’m afraid.