transformさせた要素の挙動がおかしい

Question

[√] transformさせた要素の挙動がおかしい

検証URL: こちら
ボタンを押すと要素が回転するデモです．

• L(左側面を前面に)
• C(初期面を前面に)
• R(右側面を前面に)

(スクショは正常に動いているWindows版Chromeより)

---

[√] 発生している問題（概観）

• Windows版Firefoxで，要素の前後がおかしい
• Android版Firefoxで，overflow:auto;やoverflow:scroll;が効いていないのかスクロール不可
• Windows版・Android版Firefoxと，縦幅と横幅を指定した要素(本件では.sec-wrp)の大きさが，指定どおりにならない
• iOSのSafari,Firefox,Chromeで，transform-origin: center center -50vmin,もしくはtransform:rotateY();が正常に動作しない

---

[√] 確認環境

• Windows10 (64 bit)

Chrome 58.0.3029.110 (64-bit)
Firefox 54.0 (32 bit)
(無料アップデート期間中，Windows8 -> Windows10へ)

• Android 4.4.4 (Kitkat)

Firefox 54.0
Chrome 58.0.3029.83

• iOS 10.3.2(iPad)

Safari 10.0 , Firefox 7.5
Chrome 59.0.3071.102

解決法について情報提供を求めています．
バグである場合は，ブラウザディヴェロッパーへも連絡していただけるとうれしいです．

---

[√] スクショ

---

windows

• 前後がおかしくなる

• 枠のサイズ設定が効いていない

• Androidも同様，さらにスクロールもできない

---

iOS(友人提供)

• Safari

• Firefox

• Chrome

---

おまけ

• Edge

• Internet Explorer