Safari: абсолютно позиционированные DIV не перемещаются при обновлении через DOM

Question

Я пытаюсь анимировать некоторые абсолютно позиционированные DIV на странице, используя JS для обновления верхнего и левого CSS-свойств.Не проблема в Chrome, FF и даже IE8, но попробуйте это в Safari 5, они просто сидят там ... Странно, если я изменю размер окна Safari, они обновят свою позицию ...

Вы можете увидеть демонстрациюэто здесь:

http://www.bikelanebrakes.com/tests/flyingThing1.html

Код, который обновляет DIV, действительно прост, просто немного jQuery (также обновляет ротацию, которая отлично работает в Safari):

$(this.elem).css({
 '-webkit-transform': 'rotate(' + (( this.angle * (180 / Math.PI) ) * -1) +'deg)',
 '-moz-transform': 'rotate(' + (( this.angle * (180 / Math.PI) ) * -1) +'deg)',
 'transform': 'rotate(' + (( this.angle * (180 / Math.PI) ) * -1) +'deg)',
 'left': Math.round(this.xPos) + 'px',
 'top': Math.round(this.yPos) + 'px'
});

Я добавил положение: относительно тела ... Я добавил 'px' и округлил числа, если Safari не нравятся длинные значения с плавающей запятой ... Ничего, они просто сидят тампока размер окна не изменится ...

Любые мысли или помощь, очень ценится!

Спасибо, Крис.

Answer 1

Замените свойства top и left на подсвойство translate свойства CSS transform .Для меня это решило проблему в Safari 5.

Кроме того, не используйте строковые аргументы для setInterval.

Демо: http://jsbin.com/okovov/2/

Bird.prototype.draw = function() {
    var transform = 'rotate(' + (( this.angle * (180 / Math.PI) ) * -1) +'deg)' +
                    ' translate('+ this.xPos + 'px,' + this.yPos + 'px)';
    $(this.elem).css({
          '-webkit-transform': transform,
          '-moz-transform': transform,
          'transform': transform
    });
};
// ...
var timer1 = setInterval(function(){bird1.animate();}, 50);
var timer2 = setInterval(function(){bird2.animate();}, 50);
var timer3 = setInterval(function(){bird3.animate();}, 50);

50 миллисекунд - это очень маленькая задержка.Попробуйте оптимизировать свои функции, чтобы анимация работала более плавно, например, заменив методы jQuery на ванильный JavaScript:

Bird.prototype.draw = function() {
    this.elem.style.cssText = ['-webkit-', '-moz-', '', ''].join(
        'transform:rotate(' + (( this.angle * (180 / Math.PI) ) * -1) +'deg)' +
        ' translate(' + this.xPos + 'px,' + this.yPos + 'px);'
    ); // Result: -webkit-transform: ...;-moz-transform:...;transform:...;
};

Answer 2

Я знаю, что это может быть не совсем то, что вы ищете, но вы можете попробовать использовать .offset () в jQuery, чтобы изменить их положение, в отличие от ручного изменения их атрибутов CSS.Ваш код будет выглядеть примерно так:

$(this.elem).css({
 '-webkit-transform': 'rotate(' + (( this.angle * (180 / Math.PI) ) * -1) +'deg)',
 '-moz-transform': 'rotate(' + (( this.angle * (180 / Math.PI) ) * -1) +'deg)',
 'transform': 'rotate(' + (( this.angle * (180 / Math.PI) ) * -1) +'deg)'
})
.offset({
 top: Math.round(this.yPos),
 left: Math.round(this.xPos)
});

Надеюсь, это поможет!

PS: если вы хотите установить позицию относительно , используйте jQuery's .position () .