iOS设备上的CSS3转换问题

Question

我正在尝试一些网站上的webkit转换，并且在iOS设备上遇到了问题。我每秒钟都会有六张图像随机旋转。该过渡对于六张图像中的五张很好，但由于某些原因，在使用iPad或iPhone时，第六张图像在转换过程中会消失。您可以查看示例HERE。

CSS：

.b1_needle { 
    width: 100%; 
    height: 100%; 
    z-index: 1; 
    -webkit-transform: rotate(0deg); 
    transform: rotate(0deg); 
    -webkit-transition: -webkit-transform 0.5s ease-out; 
    transition: transform 0.15s linear; 
} 

.b2_needle { 
    width: 100%; 
    height: 100%; 
    z-index: 1; 
    -webkit-transform: rotate(0deg); 
    transform: rotate(0deg); 
    -webkit-transition: -webkit-transform 0.5s ease-out; 
    transition: transform 0.15s linear; 
} 

.m1_needle { 
    width: 100%; 
    height: 100%; 
    z-index: 1; 
    -webkit-transform: rotate(0deg); 
    transform: rotate(0deg); 
    -webkit-transition: -webkit-transform 0.5s ease-out; 
    transition: transform 0.15s linear; 
} 

.m2_needle { 
    width: 100%; 
    height: 100%; 
    z-index: 1; 
    -webkit-transform: rotate(0deg); 
    transform: rotate(0deg); 
    -webkit-transition: -webkit-transform 0.5s ease-out; 
    transition: transform 0.15s linear; 
} 

.s1_needle { 
    width: 100%; 
    height: 100%; 
    z-index: 1; 
    -webkit-transform: rotate(0deg); 
    position: relative; 
    top: 6px; 
    transform: rotate(0deg); 
    -webkit-transition: -webkit-transform 0.5s ease-out; 
    transition: transform 0.15s linear; 
} 

.s2_needle { 
    width: 100%; 
    height: 100%; 
    z-index: 1; 
    -webkit-transform: rotate(0deg); 
    position: relative; 
    top: 7px; 
    transform: rotate(0deg); 
    -webkit-transition: -webkit-transform 0.5s ease-out; 
    transition: transform 0.15s linear; 
} 

的Javascript：

var ranNum; 

function randomFromTo(from, to){ 
    ranNum = Math.floor(Math.random() * (to - from + 1) + from); 
    ranNum = ranNum + "deg"; 
    return ranNum; 
} 

setInterval(function newNum(){ 
    document.getElementById("needle_b1").style.webkitTransform = "rotate("+randomFromTo(0,293)+")"; 
    document.getElementById("needle_b2").style.webkitTransform = "rotate("+randomFromTo(0,285)+")"; 
    document.getElementById("needle_m1").style.webkitTransform = "rotate("+randomFromTo(0,314)+")"; 
    document.getElementById("needle_m2").style.webkitTransform = "rotate("+randomFromTo(0,223)+")"; 
    document.getElementById("needle_s1").style.webkitTransform = "rotate("+randomFromTo(0,130)+")"; 
    document.getElementById("needle_s2").style.webkitTransform = "rotate("+randomFromTo(0,95)+")"; 
}, 2000); 

我本来以为是内存的问题，但除去所有，但一个图像的过渡不会有所作为。任何想法为什么会发生？

Answer 1

您的z-index值从-2开始。根据我的经验，Webkit不介意使用负值，但似乎Mobile Webkit的确如此。

如果你把.b1_needle你会出现以下.bigOne，尽管有100。

的z-index

从0开始您的z索引，然后上去发现一个边界。

复制并粘贴这个CSS验证：

@media screen and (orientation:portrait) 
{ 
.container { 
    background: url(../images/back_port.jpg); 
    background-position: top left; 
    background-repeat: no-repeat; 
    width: 768px; 
    height: 1004px; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    z-index: 0; 
} 

.bigOne { 
    position: absolute; 
    right: 29px; 
    top: 21px; 
    background-color: #000; 
    border: 15px solid #999; 
    height: 350px; 
    -webkit-border-radius: 190px; 
    width: 350px; 
    z-index: 1; 
    -webkit-box-shadow: 0 3px 4px #000; 
} 

.bigTwo { 
    position: absolute; 
    right: 29px; 
    bottom: 21px; 
    background-color: #000; 
    border: 15px solid #999; 
    height: 350px; 
    -webkit-border-radius: 190px; 
    width: 350px; 
    z-index: 1; 
    -webkit-box-shadow: 0 3px 4px #000; 
} 

.midOne { 
    position: absolute; 
    right: 502px; 
    top: 243px; 
    background-color: #000; 
    border: 15px solid #999; 
    height: 218px; 
    -webkit-border-radius: 124px; 
    width: 218px; 
    z-index: 1; 
    -webkit-box-shadow: inset 0 3px 4px #000; 
} 

.midTwo { 
    position: absolute; 
    right: 502px; 
    bottom: 243px; 
    background-color: #000; 
    border: 15px solid #999; 
    height: 218px; 
    -webkit-border-radius: 124px; 
    width: 218px; 
    z-index: 1; 
    -webkit-box-shadow: inset 0 3px 4px #000; 
} 

.smallOne { 
    position: absolute; 
    top: 50px; 
    right: 437px; 
    background-color: #000; 
    border: 10px solid #999; 
    height: 128px; 
    -webkit-border-radius: 74px; 
    width: 128px; 
    z-index: 1; 
} 

.smallTwo { 
    position: absolute; 
    bottom: 50px; 
    right: 437px; 
    background-color: #000; 
    border: 10px solid #999; 
    height: 128px; 
    -webkit-border-radius: 74px; 
    width: 128px; 
    z-index: 1; 
} 

.statusBox { 
    position: absolute; 
    left: 273px; 
    top: 373px; 
    background-color: #000; 
    border: 10px solid #999; 
    border-radius: 8px; 
    width: 150px; 
    height: 237px; 
    z-index: 1; 
    -webkit-box-shadow: 0 3px 4px #000; 
} 

.iconBox { 
    position: absolute; 
    left: 465px; 
    top: 463px; 
    width: 264px; 
    height: 58px; 
    background-color: #000; 
    border: 10px solid #999; 
    border-radius: 8px; 
    z-index: 1; 
    -webkit-box-shadow: 0 3px 4px #000; 
} 
} 

@media screen and (orientation:landscape) 
{ 
.container { 
    background: url(../images/back_land.jpg); 
    background-position: top left; 
    background-repeat: no-repeat; 
    width: 1024px; 
    height: 748px; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    z-index: 0; 
} 

.bigOne { 
    position: absolute; 
    left: 21px; 
    top: 29px; 
    background-color: #000; 
    border: 15px solid #999; 
    height: 350px; 
    -webkit-border-radius: 190px; 
    width: 350px; 
    z-index: 1; 
    -webkit-box-shadow: 0 3px 4px #000; 
} 

.bigTwo { 
    position: absolute; 
    right: 21px; 
    top: 29px; 
    background-color: #000; 
    border: 15px solid #999; 
    height: 350px; 
    -webkit-border-radius: 190px; 
    width: 350px; 
    z-index: 1; 
    -webkit-box-shadow: 0 3px 4px #000; 
} 

.midOne { 
    position: absolute; 
    left: 243px; 
    top: 482px; 
    background-color: #000; 
    border: 15px solid #999; 
    height: 218px; 
    -webkit-border-radius: 124px; 
    width: 218px; 
    z-index: 1; 
    -webkit-box-shadow: inset 0 3px 4px #000; 
} 

.midTwo { 
    position: absolute; 
    right: 243px; 
    top: 482px; 
    background-color: #000; 
    border: 15px solid #999; 
    height: 218px; 
    -webkit-border-radius: 124px; 
    width: 218px; 
    z-index: 1; 
    -webkit-box-shadow: inset 0 3px 4px #000; 
} 

.smallOne { 
    position: absolute; 
    left: 50px; 
    top: 437px; 
    background-color: #000; 
    border: 10px solid #999; 
    height: 128px; 
    -webkit-border-radius: 74px; 
    width: 128px; 
    z-index: 1; 
} 

.smallTwo { 
    position: absolute; 
    right: 50px; 
    top: 437px; 
    background-color: #000; 
    border: 10px solid #999; 
    height: 128px; 
    -webkit-border-radius: 74px; 
    width: 128px; 
    z-index: 1; 
} 

.statusBox { 
    position: absolute; 
    left: 428px; 
    top: 99px; 
    background-color: #000; 
    border: 10px solid #999; 
    -webkit-border-radius: 8px; 
    width: 150px; 
    height: 237px; 
    z-index: 1; 
    -webkit-box-shadow: 0 3px 4px #000; 
} 

.iconBox { 
    position: absolute; 
    left: 370px; 
    top: 380px; 
    width: 264px; 
    height: 58px; 
    background-color: #000; 
    border: 10px solid #999; 
    border-radius: 8px; 
    z-index: 1; 
    -webkit-box-shadow: 0 3px 4px #000; 
} 
} 

.statusData{ 
    width: 126px; 
    height: 100%; 
    margin-left: auto; 
    margin-right: auto; 
} 

.statusLogo{ 
    background: url(../images/mccaLogo.png); 
    height: 87px; 
    width: 100%; 
} 

.digitalTxt{ 
    font-family: 'Digital7Mono'; 
    font-size: 32px; 
    color: #fff; 
    width: auto; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 3px; 
} 

.statusDate{ 
    height: 48px; 
    width: 100%; 
    border-top: 2px #999 solid; 
} 

.statusTime{ 
    height: 48px; 
    width: 100%; 
    border-top: 2px #999 solid; 
} 

.statusLoc{ 
    height: 48px; 
    width: 100%; 
    border-top: 2px #999 solid; 
} 

.b1_notch { 
    width: 100%; 
    height: 100%; 
    background: url(../images/b1_back.png); 
    background-position: center; 
    background-repeat: no-repeat; 
    z-index: 1; 
} 

.b1_needle { 
    width: 100%; 
    height: 100%; 
    z-index: 2; 
    -webkit-transform: rotate3d(0, 0, 0, 0deg); 
    transform: rotate3d(0, 0, 0, 0deg); 
    -webkit-transition: all 0.5s linear; 
    transition: all 0.5s linear; 
} 

.b2_notch { 
    width: 100%; 
    height: 100%; 
    background: url(../images/b2_back.png); 
    background-position: center; 
    background-repeat: no-repeat; 
    z-index: 1; 
} 

.b2_needle { 
    width: 100%; 
    height: 100%; 
    z-index: 2; 
    -webkit-transform: rotate3d(0, 0, 0, 0deg); 
    transform: rotate3d(0, 0, 0, 0deg); 
    -webkit-transition: -webkit-transform 0.5s linear; 
    transition: transform 0.5s linear; 
} 

.m1_notch { 
    width: 100%; 
    height: 100%; 
    background: url(../images/m1_back.png); 
    background-position: center; 
    background-repeat: no-repeat; 
    z-index: 1; 
} 

.m1_needle { 
    width: 100%; 
    height: 100%; 
    z-index: 2; 
    -webkit-transform: rotate3d(0, 0, 0, 0deg); 
    transform: rotate3d(0, 0, 0, 0deg); 
    -webkit-transition: -webkit-transform 0.5s linear; 
    transition: transform 0.5s linear; 
} 

.m2_notch { 
    width: 100%; 
    height: 100%; 
    background: url(../images/m2_back.png); 
    background-position: center; 
    background-repeat: no-repeat; 
    z-index: 1; 
} 

.m2_needle { 
    width: 100%; 
    height: 100%; 
    z-index: 2; 
    -webkit-transform: rotate3d(0, 0, 0, 0deg); 
    transform: rotate3d(0, 0, 0, 0deg); 
    -webkit-transition: -webkit-transform 0.5s linear; 
    transition: transform 0.5s linear; 
} 

.s1_notch { 
    width: 100%; 
    height: 100%; 
    background: url(../images/s1_back.png); 
    background-position: center; 
    background-repeat: no-repeat; 
    z-index: 1; 
} 

.s1_needle { 
    width: 100%; 
    height: 100%; 
    z-index: 1; 
    position: relative; 
    top: 6px; 
    -webkit-transform: rotate3d(0, 0, 0, 0deg); 
    transform: rotate3d(0, 0, 0, 0deg); 
    -webkit-transition: -webkit-transform 0.5s linear; 
    transition: transform 0.5s linear; 
} 

.s2_notch { 
    width: 100%; 
    height: 100%; 
    background: url(../images/s2_back.png); 
    background-position: center; 
    background-repeat: no-repeat; 
    z-index: 1; 
} 

.s2_needle { 
    width: 100%; 
    height: 100%; 
    z-index: 2; 
    position: relative; 
    top: 7px; 
    -webkit-transform: rotate3d(0, 0, 0, 0deg); 
    transform: rotate3d(0, 0, 0, 0deg); 
    -webkit-transition: -webkit-transform 0.5s linear; 
    transition: transform 0.5s linear; 
}