Android4系で出会ったCSSトラップたち

概要

なぜ古いAndroidに対応しなければならないのか、コレガワカラナイ

よくCSSアニメーションなどをいじくるのですが、
IEを直した思ったらAndroid（標準ブラウザ）で崩れる定番の流れ、あると思います。

ちなみにAndroid4系とうそぶきつつ、普段対応してるのは4.4です。
トラップに引っかかり、罠解除するたびに追記していきたいと思っております。

アニメーションならJSでやればいいじゃん

やれるならな、やってるんだヨォ！！！（できるとは言っていない）
大手クライアント様ですと、JSを追加するのをとても嫌がられるんですのよ。オホホ。だからCSSでやれと言われるわけでございますのよ。

Android Studioで見てんだよなぁ？

いや、やったけどさ、Android Studioでさ、ちゃんとバージョン指定してエミュレータで見たけどもね
正常に動く（実機で動くとは言っていない）
という状況にブチ当たったため、結局実機で見ています。ヨロシクゥ！

1. backgroundをsize込みで一括指定すると効かない

👇 効きません

hoge.css

background: url("hoge.png") no-repeat left top / 100%;

👇 効きます

hoge.css

background: url("hoge.png") no-repeat left top;
background-size: 100%;

2. 疑似要素（before,after）をanimationさせようとしても効かない

👇 効かないと言い切れはしないけど

hoge.html

<div class="hoge-anime">ほげげ</div>

hoge.css

.hoge-anime:before {
  content: "ぴよよ";
  animation: fadeAnime 1s infinite;
}
@keyframes fadeAnime {
  from { opacity: 0; }
  to { opacity: 1;  }
}

👇 こちらのほうがよい（諦めて要素を増やす）

hoge.html

<div class="piyo-anime">ぴよよ</div>
<div class="hoge">ほげほげ</div>

hoge.css

.piyo-anime {
  animation: fadeAnime 1s infinite;
}
@keyframes fadeAnime {
  from { opacity: 0; }
  to { opacity: 1;  }
}

これはAndroidに限った話ではないですけどね！
なるべく少ないソースで実現できるのがクール、というのはとっても分かるのですが、
疑似要素に対するアニメーションは不安定なので、ここは潔く諦めてdivとか増やす感じでいきましょう（動くときもある、というのがまた不気味）。

3. 複数のanimationを同時に行うとき、rotateが入ってると効かない

👇 効かないと思われる

hoge.html

<div class="hoge-anime">ほげげ</div>

hoge.css

.hoge-anime {
  animation: fadeAnime 1s infinite,
             rotateAnime 1s infinite;
}
@keyframes fadeAnime {
  from { opacity: 0; }
  to { opacity: 1;  }
}
@keyframes rotateAnime {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg);  }
}

この場合は、アニメーション自体を考え直さなくてはならないかもしれません
なんとかして、回転（rotate）とそれ以外の動きを分離させられないかがんばりましょう。

動かないと思ったらtransformを別々にいじってて上書き合ってた、なんて初歩的ミスもありますので気をつけて！！

👇 やっちゃうとはずい事例

hoge.css

.hoge-anime {
  animation: translateAnime 1s infinite,
             skewAnime 1s infinite;
}
@keyframes translateAnime {
  from { transform: translateY(0); }
  to {  transform: translateY(50px);   }
}
@keyframes skewAnime {
  from { transform: skewX(0); }
  to { transform: skewX(20deg);  }
}

transformしながらtransformする（哲学）
そりゃ動かねえわ
って冷静に見ると思うんですけど、たまにやっちゃいます。
その場合は移動をposition:absolute;でやれないか試してみましょう！

ただほんとはabsoluteよりもtranslateのほうが良いようです。
参考 👇
absoluteではなくtranslateを使用する - CSSアニメーションの基礎知識のあとに学ぶ応用知識
Web制作にGPU処理を取り入れる
まあ、あくまで優先順位の話ですから、気に病むことはないと思います。

4. animation-directionのreverseとalternate-reverseが効かない

👇 効きません

hoge.css

.hoge {
  animation-direction: alternate-reverse;
}

👇 効きます

hoge.css

.hoge {
  animation-direction: alternate;
}

行って返ってを無限ループしたいアニメはよくあるので、これ地味に困るんですよね。
対応策は行って返って、までを１つのkeyframesに書くことかなと思います。
ただ要素をtransformとかで動かしてる場合はまだ対応しやすいんですが、
画像を使ったパラパラ漫画的アニメだと、コマ数を増やして対応するのはかなり大変です。
アニメ自体の動き変更も検討したほうが良いときもありそうです(ﾉД`)

他事象追記予定