覚え書き：iPhone上とWindows上でのCSS動作の違い

ここ数日、アメブロでCSSを使ってみて分かったことがある。その内容について忘れてしまう前に覚え書きしておこうと思う。
もしかするとCSSを使う人としては当然知っているはずの内容なのかもしれない；´Д｀)書くのが恐いな

iPhone上とWindows上でのCSS動作の違いについて

iPhone iOS 10の Safari (Webkitベース)
Windows 10の Chrome (Webkitベース)
Windows 10の Edge (独自)

で同じCSSを走らせたときに色々と挙動が違った。
「○○タグは Chrome Ver△△以降から対応で～」とかいうのは検索するとすぐに引っかかるんだけど、動作上の違いっていうのはあまり見つからなかったので。

違い1：Safariは座標の小数点以下を無視する？

先日の「CSS Animationで物体の放物線」では顕著に表れているんだけど。

iPhoneで見たとき、バケツが落ちてきて何回か跳ね返ったあと最後にバケツが地面にピタッと貼りついてしまう。
実はこのとき、Windowsで見るとまだ細かく跳ねているのだ。
この件だけではなく、他にも1ピクセル未満の移動は省略されているような気がするが……。

いや、ゆっくりとスクロールしたときにカクついた動作になったりしないから1ピクセル未満の移動もレンダリングされる場合があるのは分かっている。なんだろう、今回のような1ピクセル未満の範囲で動き続けるような内容だと省略されるのだろうか……？

iPhoneで見るとあのバケツの動作が違和感を感じやすいものになっているからもの凄く気になるんよね；´Д｀)

違い2：レイヤーを重ねるとSafariは挙動が怪しくなる？

全部クエスチョンマーク付きかよ；´Д｀)と言われそうですが。

Safariも普通にレイヤーを重ねたくらいではへこたれないんですが、どうにもAnimation付きレイヤーを複数枚重ねると挙動が怪しい。気がする；´Д｀)
指定したアニメーション動作になっていなかったりタイミングがずれたり……
他との複合指定の場合にのみ発生するのかもしれないが、とりあえず重ねると危ないということで；´Д｀)

違い3：SafariはAnimationのdelay count上書きがうまく動作しない？

うーーーーんこれは自分の書き方が悪い可能性もあるけれども……

「同じ動作をするがタイミングのみ少しずつ遅らせる要素がある」というCSSを書きたい場合。
例えば先日の円運動の記事であれば、先頭を走る〇とそれに続く〇とか。
Profile cardであれば、人物部分に触れたときに飛んでくる音符であるとか。あるいはその音符が並んだあとの上下に揺れる動作だとか。

こういう動作をさせたいときに自分はこんな感じで書いている。

決まった動きを定義するためのCSS classを作る
複数のdivにそのCSS classを設定する
ずらしたい時間は、各要素に直接 style="animation-delay:〇s" として指定していく

なぜこうしているかというと、animation-delayの違いだけでCSS classをいっぱい定義したくないから；´Д｀)だから差分の部分のみを各要素のHTMLタグ部分で直接上書きしている。

しかしこれだと Safariではあまりうまく動作してくれなかったりする……。Profile cardの音符の動きを見てもらうと分かるんだけど、最初に音符が飛んでくる動作、これはまあまあ動いている。けど音符が並んだあとに跳ねる動作。これ、どの音符も同じようなタイミングで跳ねてしまっている；´Д｀)

で、音符が飛んでくるときと跳ねるとき、この２つのケースで何が違うのかというとタイミングをずらす時間の大きさだったりするんよね；´Д｀)
ここでも最初の問題と似たような問題が……値が小さいとうまく表現されないという……

色々勉強になりました

なんにしてもここまで携帯動作とPC動作の違いを気にするようになったのはアメブロのおかげだしね；´Д｀)アクセス解析見ているとPCからの参照と携帯からの参照がそれぞれ半々のようだし。
さすがにブログを見てもらっている方々の内の5割について「動くかどうか分かりません」とは言えないので頑張って同じ動作になるようにしてはいるものの今一歩力及ばずで申し訳ないです。
今後も勉強していきますのでよろしくお願いします。