rotateY在带有android 4.1.2默认浏览器的HTC One上无法正常工作

我准备了这把小提琴来演示我的问题：

@关键帧mb_旋转{
0%{变换：旋转（0度）；}
25%{变换：旋转（90度）；}
50%{变换：旋转（180度）；}
75%{变换：旋转（270度）；}
100%{变换：旋转（360度）；}
}
@-webkit关键帧mb_旋转{
0%{-webkit变换：旋转（0deg）；}
25%{-webkit变换：旋转（90度）；}
50%{-webkit变换：旋转（180度）；}
75%{-webkit变换：旋转（270度）；}
100%{-webkit变换：旋转（360度）；}
}         
/*   */
#立方体{
背面可见性：隐藏；
宽度：300px；高度：300px；
变换样式：保留-3d；
-webkit变换样式：保留-3d；
/*转换：转换1300ms线性0s*/
位置：相对位置；
保证金：0自动；
动画：10秒mb_旋转无限线性；
-webkit动画：10s mb_旋转无限线性；
}
#脸1{
宽度：300px；高度：250px；
变换：translateZ（125px）；
-webkit转换：translateZ（125px）；
背景：绿色；
背面可见性：隐藏；
位置：绝对位置；
}
#面2{
宽度：300px；高度：250px；
变换：rotateX（90度）translateZ（125像素）；
-webkit变换：rotateX（90度）translateZ（125像素）；
背景：红色；
背面可见性：隐藏；
位置：绝对位置；
}
#面3{
宽度：300px；高度：250px；
变换：旋转（180度）旋转（125像素）旋转（0度）；
-webkit变换：旋转（180度）平移（125像素）旋转（0度）；
背景：蓝色；
背面可见性：隐藏；
位置：绝对位置；
}
#脸4{
宽度：300px；高度：250px；
变换：rotateX（-90度）translateZ（125px）rotate（180度）rotateZ（180度）；
-webkit变换：rotateX（-90度）translateZ（125px）rotate（180度）rotateZ（180度）；
背景：黄色；
背面可见性：隐藏；
位置：绝对位置；
}
#脸5{
宽度：250px；高度：250px；
变换：旋转（90度）平移（175px）；
-webkit变换：旋转（90度）平移（175px）；
背景：橙色；
背面可见性：隐藏；
位置：绝对位置；
}
#脸6{
宽度：250px；高度：250px；
变换：旋转（-90度）平移Z（125px）；
-webkit变换：旋转（-90度）平移Z（125px）；
背景：紫色；
背面可见性：隐藏；
位置：绝对位置；
}            

如果您在Firefox桌面浏览器上运行它，它应该显示旋转框（带有彩色边）。长方体绕其y轴旋转

如果你在SGS2上运行它，在默认浏览器上运行安卓4.1.2，它看起来仍然不错

但是

如果你在HTC One上运行它，在默认浏览器上运行安卓4.1.2，它会在旋转90度后开始消失。然后当动画在270度之后，方框再次出现在屏幕上

我尝试了很多方法来解决这个问题，在网上搜索，但仍然不知道为什么会发生这种情况，也许有人可以帮忙

<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;                
        }