16

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

Jashwant
  • 28,410
  • 16
  • 70
  • 105

1 Answers1

26

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.

jangxx
  • 989
  • 1
  • 9
  • 23
  • Seeing no explanation and no solution other than yours. I am awarding you bounty. You solution does work. – Jashwant May 07 '13 at 17:17
  • 3
    I've also come across this `-webkit-transform: translateZ(0);` but I haven't tracked down if it's any different than jangxx's example. – Jason Lydon May 09 '13 at 17:12
  • This fixed an issue for me as well...This is a beautiful fix! Thanks jangxx! – AdityaSaxena Jul 03 '13 at 06:58
  • Was having the same issue on Chrome version 38.0.2125.104m. Can't believe this fixed it! It also seemed to make those transitions smoother! – jbx Oct 25 '14 at 23:55