CSS Transition: исправить положение правого края div при переводе левого края

Question

Я пытаюсь оживить DIV с помощью CSS3 переходов. Пример DIV:

HTML:

<div class="element"></div>

CSS:

.element {
  -webkit-transform: translate3d(0,0,0);
  -webkit-transition: -webkit-transform 2s linear, width 2s linear;
  position: absolute;
  left: 100px; top: 100px;
  height: 10px; width: 50px;
  background-color: black;
}

Это означает, что DIV занимает область в своем контейнере от (100px, 100px) до (150px, 110px) - и правый край зафиксирован на 150px.

Мне бы хотелось, чтобы DIV поддерживал статический правый край на уровне 150 пикселей, пока я переводил левый край за пределы экрана, поэтому я применял (через Javascript) класс перехода к DIV следующим образом:

CSS:

.transition {
  -webkit-transform: translate3d(-200px, 0, 0);
  width: 150px;
}

Проблема, которую я вижу, состоит в том, что переход по ширине не идет в ногу с левым краем переведенного DIV, поэтому вместо равномерного увеличения размера и левого положения, положение правого края колеблется, когда DIV соскальзывает с различная скорость, слегка мерцает (зависит от платформы, насколько она мигает).

Эта проблема более остро проявляется в Mobile Safari (веб-просмотр Phonegap на iPhone - моя основная платформа разработки), а не в Chrome.

Я поместил JSFiddle на http://jsfiddle.net/XwuBz/ который демонстрирует его (посмотрите на iPhone, чтобы увидеть, как это происходит).

Есть ли другой способ достичь этого конечного результата?

Заранее спасибо,

Дэн

Answer 1

Что ж, похоже, у iOS Safari есть некоторые странные проблемы с переходами / преобразованием.

Я пытался добиться тех же результатов только с помощью jQuery, и он работал на iPhone 4s, iOS6:

$('.element').animate({left:'-=200','width':'+=200'},2000);

Вот демо.