android - android 4.1.2 のデフォルト ブラウザーを使用する HTC One で、rotateY が正しく機能しない

Question

私の問題を示すために、このフィドルを用意しました: http://jsfiddle.net/Nvy3F/

<div id="cube">
        <div id="face1"></div>
        <div id="face2"></div>
        <div id="face3"></div>
        <div id="face4"></div>
        <div id="face5"></div>
       <div id="face6"></div> 
</div>

            @keyframes mb_rotate {
            0% {transform:rotateY(0deg);}
            25% {transform:rotateY(90deg);}
            50% {transform:rotateY(180deg);}
            75% {transform:rotateY(270deg);}                
            100% {transform: rotateY(360deg);}
        }

        @-webkit-keyframes mb_rotate {
            0% {-webkit-transform:rotateY(0deg);}
            25% {-webkit-transform:rotateY(90deg);}
            50% {-webkit-transform:rotateY(180deg);}
            75% {-webkit-transform:rotateY(270deg);}                
            100% {-webkit-transform: rotateY(360deg);}
        }         
 /*   */

        #cube {
            backface-visibility:hidden;
            width:300px;height:300px;
            transform-style:preserve-3d;
            -webkit-transform-style:preserve-3d;                
            /*transition:transform 1300ms linear 0s;*/
            position:relative;
            margin: 0 auto;
            animation: 10s mb_rotate infinite linear;
            -webkit-animation: 10s mb_rotate infinite linear;
        }

        #face1 {
            width:300px;height:250px;                
            transform:translateZ(125px);
            -webkit-transform:translateZ(125px);
            background:green;
            backface-visibility:hidden;
            position:absolute;

        }

        #face2 {
            width:300px;height:250px;
            transform:rotateX(90deg) translateZ(125px);
            -webkit-transform:rotateX(90deg) translateZ(125px);
            background:red;
            backface-visibility:hidden;
            position:absolute;                
        }

        #face3 {
            width:300px;height:250px;
            transform:rotateY(180deg) translateZ(125px) rotateZ(0deg);
            -webkit-transform:rotateY(180deg) translateZ(125px) rotateZ(0deg);
            background:blue;
            backface-visibility:hidden;
            position:absolute;                
        }

        #face4 {
            width:300px;height:250px;
            transform:rotateX(-90deg) translateZ(125px) rotate(180deg) rotateZ(180deg);
            -webkit-transform:rotateX(-90deg) translateZ(125px) rotate(180deg) rotateZ(180deg);
            background:yellow;
            backface-visibility:hidden;
            position:absolute;                
        }

        #face5 {
            width:250px;height:250px;                
            transform:rotateY(90deg) translateZ(175px);
            -webkit-transform:rotateY(90deg) translateZ(175px);
            background:orange;
            backface-visibility:hidden;
            position:absolute;                
        }

        #face6 {
            width:250px;height:250px;
            transform:rotateY(-90deg) translateZ(125px);
            -webkit-transform:rotateY(-90deg) translateZ(125px);
            background:purple;
            backface-visibility:hidden;
            position:absolute;                
        }            

たとえば Firefox デスクトップ ブラウザで実行すると、回転するボックスが表示されます (側面が色付き)。ボックスは y 軸を中心に回転します。

デフォルトのブラウザでAndroid 4.1.2を使用してSGS2で実行すると、それでも問題なく表示されます。

しかし...

HTC One で android 4.1.2 をデフォルトのブラウザで実行すると、回転が 90 度の回転を通過した後に消え始めます。アニメーションが 270 度を超えると、ボックスが再び画面に表示されます。

私はこの問題に対して多くのアプローチを試み、ウェブを検索しましたが、なぜそれが起こるのかまだわかりません.誰かが助けてくれるかもしれません.