iOS设备上的CSS3过渡问题

时间：2011-06-02 15:42:43

标签： ipad css3 webkit mobile-website css-transitions

我正在网站上尝试一些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);

我原本以为这是一个内存问题，但是从除了那个图像之外的所有图像中删除转换并没有什么区别。为什么会出现这种情况的想法？

1 个答案:

答案 0 :(得分：2)

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

如果在.b1_needle上放置边框，您会注意到它出现在.bigOne下方，尽管z-index为100。

从0开始你的z-indexes，然后再上去。

复制并粘贴此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;
}
相关问题
最新问题