主にCSS。各記述で発生する現象まとめ。
前に書いていた「本当にあったAndroidの怖い話」をマージ済み。
随時更新。
position: fixed
android2系で、下の要素が押せてしまう
- ポップアップなど一時的に出すもの(その間、裏要素のイベント切るなどの対応が可)で、上に演出など乗せないケースでないと、難しい
transform(scale・rotate等)が効かない端末あり
- 効く場合もブラウザにより挙動がけっこう異なる (仕様的にどれが正しいのかわからん)
- いくつかのandroid・IE10 → 無視
- chrome・firefox → transform時に消えてしまう
- android chrome → 一緒にtransforomする
- android2系では、fixedな要素そのものじゃなくて、その上の要素もtransformしないことがある (これはさすがにバグでは)
transition
- 意外とanimationより安定性に難あり
- firefoxで、wrapperな要素において、animationは効くのにtransitionは効かないケースがあった
- android2系で、動作はするがイベント(
transitionend)が発火しないケースあり (調査不十分)
:before, :after
- IE8では部分的なサポートしか為されていないため、バグあり
- 重ね順が、 relative・absoluteな通常要素には絶対に勝てない 。z-indexを付けても同じ。
- hoverなどを掛けあわせたセレクタで指定したスタイルが、うまくかからない時がある
z-index
- android2系で上手く働かないケースが多々あり
- いまどきはsassがあるとはいえ、重ね順ぜんぶz-indexで管理するのもキリがないので、頼り過ぎないのが無難
android特有 (としか言い様がない)
Nexus7で、scaleかけているelementとbackground-attachment: fixedがかちあうと、中身が文字化けする
- fixed系とtransformの相性が悪いのはわかるけど、このリアクションはすごい
Android3.1は、blur 0pxのbox-shadowに対応してない
-
なにも言わずにshadow自体消えるので注意
％指定のborder-radiusが効かない
- これはまぁなんか、おおむね代替可能なので許す。
- 横幅より大きいpx指定すると効かない、とかいうのもあるらしい。これもなんかまぁまっとうな気もするので許す。
viewportを指定しないと、android chromeでフォントサイズなどの計算がおかしくなる
- 高さを指定していない要素で、フォントサイズが倍になってしまう
-
max-height:99999pxとか、なにかしらでいいから高さを制限してやると直る
-
- widthの計算がおかしくなる場合がある
-
position:absolute; width:100%;の要素が、なぜか親要素より小さくなったりする。 - 親を
position:relativeにしたら直った詳細は不明。
-
IE特有 (もはや懐かしの)
HTML5の要素は放っておくと出ません
- html5shiv等を忘れないこと
- main要素はそれでも出ないことがあるらしい
WebFont
- 意外と表示はちゃんとされたりする。が、油断していると「半透明にはできません」みたいな急なバグがあったりする。