Zepto.js / CSS3 Webkit Transforms Замедляется после события .anim ()

Question

У меня странный.Я делаю небольшую мобильную веб-страницу для iPad с двумя кнопками.Тот, который при касании добавляет и удаляет класс к объекту (который является просто спрайтом изображения, который смещает его положение фона). Второй анимирует тот же объект.Однако после Я нажал кнопку запуска функции анимации, функция добавления / удаления класса работает действительно очень медленно.Настолько медленно, что вы видите сдвиг положения фона изображения спрайта в замедленном движении?Я озадачен?Теперь функция anim Zepto.js использует преобразования webkit css3.Может ли это быть проблемой с ними?Они довольно недавние?

CSS

#hero {
    left: 320px;
    position: absolute;

}
.hero_crouch {
    background: url(../assets/sprites/sprites_8.png) 1px 0;
    width: 109px;
    height: 130px;
}

Кнопка 1:

$('#hero').addClass('hero_walk') //initial class added
$('#bottom_mid a').bind('touchstart', function() {
          return $('#hero').addClass('hero_crouch');
        }); //new class temporarily added on touch
$('#bottom_mid a').bind('touchend', function() {
          return $('#hero').removeClass('hero_crouch'); // then class removed again

Кнопка 2:

 $('#mid_right a').bind('touchstart', function() {
      return $('#hero').anim({
        translate3d: '50px, 0px, 0px'
      }, 1, 'ease-in-out 1ms');
    });

Answer 1

Я никогда не использовал Zepto, но, похоже, эта проблема может быть связана: Медленная анимация с помощью webkit-transform translate () в iPhone OS 3.0

Попробуйте сделать это через css:

#hero {
  /*your code*/
  -webkit-transition: -webkit-transform 1s ease-in-out;
}
.anim {
  -webkit-transform: translate3d(50px, 0px, 0px); 
}

А потом ...

 $('#mid_right a').bind('touchstart', function() {
      return $('#hero').addClass('anim');
 });

Если это проявляется в той же самой проблеме, то это ошибка Webkit.

Редактировать: также, что случилось спереход 1 мс?