CODEWITHSUNDEEP
google-chromecss-transitionsjquery-transit
Jashwant
Jashwant

Reputation: 29005

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

Upvotes: 16

Views: 4674

Answers (1)

jangxx
jangxx

Reputation: 1019

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.

Upvotes: 26

Related Questions