CSS3 transition problem on iOS devices

Question

I'm trying out some webkit transitions on a site and have come across a problem on iOS devices. I have six images being given a random rotation every second. The transition works fine for five out of the six images but for some reason when using the iPad or the iPhone the sixth image disappears during the transition.

You can view the example 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);

I originally thought it was a memory issue but removing the transition from all but that one image doesn't make a difference. Any ideas for why this is would be happening?

Answer 1

Your z-index values are starting from -2. In my experience Webkit doesn't mind that you use negative values, but it seems Mobile Webkit does.

If you put a border on .b1_needle you will notice it appears below .bigOne, despite having a z-index of 100.

Start your z-indexes from 0 and then go up.

Copy and paste this CSS to verify:

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