Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS3 transition leaves a trail

It happens sometimes with particular text, transitioning with CSS3. I do not know the reason why it happens and thus I cannot recreate the same in jsfiddle.

But you can look at 4th slide (the one with 5 rings) here,

http://jashwant.github.io/kickass-slider/

Cool text leaves a trail while animating and trail gets removed after sometime. But other text works okay without leaving any trail. I am not able to find out the problem.

How can I avoid this trail ?

(I am using latest linux chrome 26.0.1410.63)

p.s. I am using jquery-transit to animate.

See the Cool in picture.

enter image description here

UPDATE:

Here's more detailed answer

like image 415
Jashwant Avatar asked Apr 27 '13 18:04

Jashwant


1 Answers

You can make the moving objects hardware-accelerated in Chrome, until the bug is fixed. Simply add the line

-webkit-transform: translate3d(0,0,0);

to the definition of your slider objects (In my test, I added it to:

.slider > li > .object {

). This fixed it for me.

like image 184
jangxx Avatar answered Sep 23 '22 19:09

jangxx