在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桌面浏览器它应该显示旋转框（带有彩色边）。 Box围绕它的y轴旋转。

如果你在默认浏览器上使用android 4.1.2在SGS2上运行它仍然看起来不错。

但是...

如果你在默认浏览器上使用Android 4.1.2在HTC One上运行它，它会在旋转经过90度旋转后开始消失。然后当动画在270度框后再出现在屏幕上。

我尝试了很多解决这个问题的方法，搜索网络但仍然不知道为什么会这样，也许有人可以提供帮助。