Проблема перехода CSS3 на устройствах iOS

Question

Я пробовал некоторые переходы webkit на сайте и столкнулся с проблемой на устройствах iOS. У меня есть шесть изображений, получающих случайное вращение каждую секунду. Переход работает нормально для пяти из шести изображений, но по какой-то причине при использовании iPad или iPhone шестое изображение исчезает во время перехода.

Вы можете посмотреть пример ЗДЕСЬ .

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-индекса начинаются с -2.По моему опыту, Webkit не возражает против того, что вы используете отрицательные значения, но, похоже, это делает Mobile Webkit.

Если вы поставите границу для .b1_needle, вы заметите, что она появляется ниже .bigOne, несмотря на наличие z-индексаиз 100.

Начните z-индексы с 0, а затем повышайтесь.

Скопируйте и вставьте этот 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;
}