Jquery CSS анимация не плавная в Ipad Safari

Question

Плавная анимация не происходит в сафари на ipad с jquery animate

$('#myId').css({ 'left': '-100%' }).animate({ 'left': '0' }, 300, 'linear');

Я тоже пробовал с опцией добавления класса, при условии перехода css в этом переходе класса: легкость в 2 с;

Есть ли способ дать плавную анимацию, используя jquery или css для работы так же, как в Google Chrome.

Я допускаю, что будут некоторые факторы, включая производительность оборудования и скорость сети.

Answer 1

Свойство left не использует аппаратное ускорение при анимации, поэтому оно будет нестабильным независимо от того, находится ли оно в вашей таблице стилей или применено с помощью JS.

Было бы лучше использовать translateX() внутриtransform, который использует аппаратное ускорение для выполнения анимации.

transform: translateX(-100%);

Answer 2

Мой совет - использовать css transition. Анимация перехода может быть такой:

#myId {
  width: 100px;
  height: 100px;
  left: 0;
  top: 0;
  background: red;
  position: relative;
  display:block;
}

#myId:hover {
  transition: left 3s linear;
  left: 500px;
}

<div id="myId"></div>

Чтобы узнать больше о переходах CSS, посетите, например, https://www.w3schools.com/css/css3_transitions.asp. :)

С уважением