はじめに
久々にレスポンシブデザインのコーディングと、iOS9、Android4系（4.2以上のAOSP)に対応するコーディングをしてはまったことメモ。
今後も触って何かあれば追加していきます。
似たような記事はたくさんありますが、結構引っかからないものもあったので、少しでも引っかかりやすくなればと思います。
position absolute x display flex
Android標準ブラウザ
position absolute と display flexを同時に使った際に中の要素が貫通したりすることがあった。
基本的に対応ブラウザがこの記事の場合flexを使わないと割り切ったほうが精神的にもしかしたら幸せかもしれない。
（後述するflex-wrapやiOSのnowrap/flex-shrink等 ある程度は使えるけどバグがやはり一杯ある）
flex-wrap が使えない
Android標準ブラウザ
PC3カラム、SP2カラムのカードリストのようなもの（ただし一行単位で要素の中身の高さによって高さを揃える）を実装する時に一行ずつラップしたくないので、
ul>li*8 的な感じで並べたくなるものの、レスポンシブとクロスブラウザを考えると難しい。
最終的にはfloatで並列で並べてレスポンシブで幅を変えてカラム数を変更し、
matchHeight のようなライブラリ等でjsから高さをそろえることで実現
position: fixed x その中に input要素
iOS9.x ~ 10.2.xまで
ページ上部にfixedで固定した要素の中にinputがある状態。
この状態でinputにフォーカスすると何故か__fixedの要素がabsoluteと扱われるようになり__ページ上部へスクロールする。
（ページ上部に飛んでいったinput要素にフォーカスしようとした上でiOSはinput要素を画面の中に（中央に？）寄せようとするため
これについては先にこの症状を把握していて、切れないOSバージョンの場合、WF/Designを変えてもらえないかを先に相談したほうが良い。
途中まで頑張ろうとした結果、jsからtouchstartイベントで preventDefault した上で、
そのタイミングでjsからabsoluteでその位置にいるようにすることもある程度は可能なものの、処理的に
- preventDefault
- absoluteの見た目でその場所に配置
- その場所からそのままスクロールもできるのでスクロールしても追従するようにscrollにイベントを設定
- jsから focus
- blurする時にそのscrollイベントを解除
こんな感じになってしまい、そしてこれで足りたか記憶が怪しいほどに複雑になる。
さらにその処理をOSを限定して埋め込む等になるので専用にしては処理が多すぎて怖いのでできれば切りたい所。
ちなみにfocusした時にjsで元の位置に戻すみたいな処理を書くと中々楽しい感じになるので使える感じではありませんでした。
最終的にOSによって処理の変更はしつつも吸着しているそのままの場所ではinputが使えないという制約で許容してもらった
data属性にcssを与えた上でdata属性をjsから変更して見た目を変える
Android 標準ブラウザ（AOSP）
data属性にjsからの処理で状態等を埋め込みつつ、その状態によって、
一括で配下の要素を変化させるcssを transition を使用してアニメーションをかけるような感じで設定していた。
しかしjsからdata属性を変更しても標準ブラウザのみ何も反応がない。
調べてみると標準ブラウザではdata属性に設定した上でdata属性がjsから書き換えられた場合に
リペイントされないようで、反応がないように見えるという状態だった。
試しにdata属性が変わるタイミングで変わってほしい要素に min-width: 0 をjsから設定してみると動くようになった。
このブラウザのためにstyle属性に書き込む（場合によっては大量に）というのは避けたいので
data属性を使用したcssを辞めて対応した。
ただ、data属性を使用したくなっている段階でdata属性を辞めるのは容易ではないというか
気持ち悪くなるので、結局のところ対象ブラウザから排除したい所（本末転倒）
あとがき
つらみ。
やはりデザイン等も周りが新しいことをやっていたりするので、
サイト全体でのカラム数変更や、要素単位でのカラム変更等、
実装に工夫が必要（とはいえ最新のcssが使えれば簡単）というものを
デザイン側でも盛り込みやすくなっているというか、盛り込みたいと思うので、
ちゃんとした情報を事前にもって、WFやデザイン作成前、途中の段階で説明して削ぎ落とせると幸せですね。
一体何と戦っているのか