iOSでのみ立方体がちらつく

cssで作成した立方体をcssアニメーションで動かしているのですが、
iOSでのみ角が欠けてちらついてしまいます。
色々と調べてみて、

perspective: 1000;

を追加したり、

backface-visibility: hidden;

を書いたりしたのですが、思っているような挙動にならず困っています。

■デモ
demo

お知恵を貸していただけると幸いです。

宜しくお願いいたします。

HTML
1<div class="back">
2<div class="css-cube">
3<div class="css-face css-forward"></div>
4<div class="css-face css-reverse"></div>
5<div class="css-face css-right"></div>
6<div class="css-face css-left"></div>
7<div class="css-face css-top"></div>
8<div class="css-face css-bottom"></div>
9</div>
10  </div>

css
1.back {
2  width: 100vw;
3  height: 100vh;
4  background-color: #274bd2;
5  position: fixed;
6  z-index: 21;
7  transform-origin: center center;
8  animation-iteration-count:1;
9  transform: translate3d(0px, 0px, 10px);
10   -webkit-transform: translate3d(0px, 0px, 10px);
11
12}
13
14.css-cube { /* 立体の大きさ傾きの指定 */ 
15width: 100px; 
16height: 100px;  
17border: none; 
18transform-style: preserve-3d; /* ３Ｄで表示 */ 
19transform:rotateY(-30deg) rotateX(-30deg) rotateZ(100deg); /* 立体の傾き */ 
20display : inline-block; 
21animation: cubeAnime 4s linear infinite forwards; /* 動きの指定 */ 
22z-index: 22;
23position: absolute; 
24top: 0; 
25bottom: 0;  
26left: 0;  
27right: 0; 
28margin:auto;
29transform: translate3d(0px, 0px, 50px);
30-webkit-transform: translate3d(0px, 0px, 50px);
31perspective: 1000;
32
33} 
34@keyframes cubeAnime{ /* 回転方向の指定 */ 
350% { transform: rotateY(330deg) rotateX(-30deg) rotateZ(10deg);}  
36100% { transform: rotateY(-30deg) rotateX(-30deg) rotateZ(10deg);}  
37} 
38.css-face { /* 各面の指定 */ 
39position: absolute; 
40width: 100px; 
41height: 100px;  
42border: 2px solid #4094BF;  
43line-height: 100px; 
44font-size: 50px;  
45color: black; 
46text-align: center; 
47opacity: 1; /* 透明度を指定 */  
48backface-visibility : hidden; /* 裏面を表示 */
49-webkit-backface-visibility : hidden; /* 裏面を表示 */ 
50transform: translate3d(0px, 0px, 50px);
51-webkit-transform: translate3d(0px, 0px, 50px);
52} 
53.css-forward { /* 前面の指定 */  
54background: #3A83C4;  
55transform: translateZ(50px);
56-webkit-transform: translateZ(50px);
57} 
58.css-reverse { /* 後面の指定 */  
59background: #3A83C4;  
60transform: rotateY(180deg) translateZ(50px);
61-webkit-transform: rotateY(180deg) translateZ(50px);
62} 
63.css-right { /* 右面の指定 */  
64background: #3A83C4;  
65transform: rotateY(90deg) translateZ(50px);
66-webkit-transform: rotateY(90deg) translateZ(50px);
67} 
68.css-left { /* 左面の指定 */ 
69background: #3A83C4;  
70transform: rotateY(-90deg) translateZ(50px);
71-webkit-transform: rotateY(-90deg) translateZ(50px);
72} 
73.css-top { /* 上面の指定 */  
74background: #3A83C4;  
75transform: rotateX(90deg) translateZ(50px);
76-webkit-transform: rotateX(90deg) translateZ(50px);
77} 
78.css-bottom { /* 下面の指定 */ 
79background: #3A83C4;  
80transform: rotateX(-90deg) translateZ(50px);
81-webkit-transform: rotateX(-90deg) translateZ(50px);
82}