最近見つけたiOSのバグ（？） -JQuery アニメーション-

最近、ほとんどjQueryを使用したアニメーションの実装をしなくなってきておりますが、 たまたまiOSで納品物をチェックしている際に見つけてしまった挙動について記したいと思います。

サイドからスライドするメニューの動きが不自然。

メニューボタンを押すと横からスライドするパターンのメニューですが、 メニューボタンを押して開く時はスムーズなのですが、戻るときの挙動が［最初に瞬間移動をして真ん中あたりにいき、そこからアニメーションが始まるような感じ］になっておりました。

以下、jQueryのソースコード（抜粋）

ボタンを押してメニューを開く処理

$('#hoge').animate({
  right:'80%'
});

ボタンを押してメニューを閉じる処理

$('#hoge').animate({
  right:'0'
});

一見、どこにでもありそうな処理ですがこの記述がどうやらiOSでは、 不自然な動きを起こしてしまうようです。

解決方法

ボタンを押してメニューを閉じる処理の数値を0と指定するのではなく、 0%と指定してあげることでスムーズに動くようになりました。

実際に以下のページをiPhone等で確認するわかります。

CodePen - iOS - bug??

もし自社サイトなどで似たような動きをしていた場合、試してみる価値はあるかと思います。

検証環境

iOS 9.1/ 9.2.1 / 9.3.1

深まる謎（余談）

ただこれが逆の場合、この現象が起きないという...。 （誰か教えてください。）

$('#hoge').animate({
  left:'80%'
});

$('#hoge').animate({
  left:'0'
});

最後に

この度の熊本地震により被災されたみなさまとそのご家族の方々に心からお見舞い申し上げます。 また一日も早い復旧がなされますことをお祈りいたします。