[CSS]一部ブラウザでKeyframe内に設定したflexboxのorderがきかない[memo]

　トップページにCSSでスライダーを表示したのですが、それをiOSで表示確認したとき、なんかちゃんといけてなかったので、いくつかのブラウザで確認しつつ原因を調べてみたところ、どうやら題名どおりの事態になっているらしいことに気づきました。

トップページのスライダーの切り替えの仕組み

　スライダーの切り替えには、Animationのkeyframesを使っています。トップページでChromeの検証ツールなどを使っていただければわかるように、keyframeの途中でorderを変えるように設定しています。
　これが、一部ブラウザではきかず、ただフェードイン・アウトを繰り返すだけになってしまっています。

IE11（Edgeは不明）とiOSのsafariできかない

　CodePenでも簡単なコードを書いてテストしてみたのですが、どうやらIE11とiOSのSafariでそうなっているみたいです。IEなんかはさらに表示がえぐいことに…まあIEなんで仕方のないことですが…。
　CodePenでもう少し見せれるテストのコードが書けたらここに乗せるかもです。→以下にデモを表示しています。
　orderの作用を確認するため、アニメーションなど関係なくorder(4)が指定してある一番目のdivは右端になっています。first divと書かれているものが右端なら、orderは作用しています。
　その左の2つの要素がアニメーション中に入れ替わるようにkeyframesで指定してあります。つまり、左二つが入れ替わったり元の位置に戻ったりというアクションが確認できれば、そのブラウザでkeyframes中のorderの変更はできるようになっているといえます。

See the Pen Test for flexbox order change in keyframes by suquiya kirico (@suquiya) on CodePen.

考えている対応

JavaScriptでどうにかする

　調べていると、jQueryに頼らなくても簡単なJavaScriptと、スライダーのために作成したCSSでどうにかできそうですので、そうしようかと思っています。
　…結局CSS Onlyにするにはまだいろいろ障壁があるんですね…orz