Кнопки исчезают из-за анимации на элементах родства в Chrome

Question

Я пытаюсь реализовать простую 3D-галерею с помощью CSS3. Он хорошо работает в браузере IE10 +, но у него есть небольшая ошибка на новейшей версии хром, когда кнопка исчезает при нажатии. Может ли кто-нибудь сказать мне, как это исправить? Заранее спасибо.

window.onload=function(){ 
 
    var oWrap=document.getElementById('wrap'); 
 
    var oImgs=oWrap.getElementsByTagName('img'); 
 
    var oBtns=oWrap.getElementsByTagName('input'); 
 
    var iNow=0; 
 
    oBtns[0].onclick=function(){ 
 

 
    oImgs[iNow].style.WebkitAnimation='1s hide'; 
 
    oImgs[iNow].className=''; 
 
    if (iNow<=0) { 
 
     iNow=oImgs.length-1; 
 
    } 
 
    else{ 
 
     iNow--; 
 
    } 
 
    oImgs[iNow].style.WebkitAnimation='1s show'; 
 
    oImgs[iNow].className='active'; 
 

 
    }; 
 

 
    oBtns[1].onclick=function(){ 
 
    oImgs[iNow].style.WebkitAnimation='1s hide'; 
 
    oImgs[iNow].className=''; 
 
    if (iNow>=oImgs.length-1) { 
 
     iNow=0; 
 
    } 
 
    else{ 
 
     iNow++; 
 
    } 
 

 
    oImgs[iNow].style.WebkitAnimation='1s show'; 
 
    oImgs[iNow].className='active'; 
 
    }; 
 
};

*{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
@-webkit-keyFrames show{ 
 
    0%{ 
 
    -webkit-transform:rotateX(180deg); 
 
    opacity: 0; 
 

 
    } 
 
    100%{ 
 
    -webkit-transform:rotateX(0deg); 
 
    opacity: 1; 
 
    } 
 
} 
 
@-webkit-keyFrames hide{ 
 
    0%{ 
 
    -webkit-transform:rotateX(0deg); 
 
    opacity: 1; 
 
    } 
 
    100%{ 
 
    -webkit-transform:rotateX(-180deg); 
 
    opacity: 0; 
 
    } 
 
} 
 

 
#wrap{ 
 
    width: 400px; 
 
    height: 300px; 
 
    position: relative; 
 
    margin: 100px auto; 
 
    -webkit-perspective:800px; 
 
} 
 
img{ 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    -webkit-transform-style:preserve-3d; 
 
    -webkit-transform-origin:bottom; 
 
    -webkit-transform:rotateX(180deg); 
 
    opacity: 0; 
 
} 
 

 
input{ 
 
    width: 80px; 
 
    height: 80px; 
 
    border-radius: 50%; 
 
    color: #fff; 
 
    font:20px/40px arial; 
 
    text-align: center; 
 
    position: absolute; 
 
    background: #000; 
 
} 
 

 
#wrap input:nth-of-type(1){ 
 
    left: -200px; 
 
    top: 200px; 
 

 
} 
 
#wrap input:nth-of-type(2){ 
 
    right: -200px; 
 
    top:200px; 
 

 
} 
 
.active{ 
 
    -webkit-transform:rotateX(0deg); 
 
    opacity: 1; 
 
}

<div id="wrap"> 
 
    <img src="img/1.jpg" class="active" /> 
 
    <img src="img/2.jpg"/> 
 
    <img src="img/3.jpg"/> 
 
    <img src="img/4.jpg"/> 
 
    <img src="img/5.jpg"/> 
 
    <input type="button" value="Previous" /> 
 
    <input type="button" value="Next" /> 
 
</div>

Answer 1

Для меня это выглядит как ошибка в текущем стабильном Chrome (49.0.2623.110 м). Анимация влияет на элементы сиблинга. Обратите внимание, что в Chrome Canary (теперь это 51.0.2694.0) это не воспроизводится. Я думаю, что, ожидая обновления хрома, вы можете найти некоторое обходное решение. Кнопки Оберточные в отдельном <div> работал для меня:

window.onload=function(){ 
 
    var oWrap=document.getElementById('wrap'); 
 
    var oImgs=oWrap.getElementsByTagName('img'); 
 
    var oWrap2=document.getElementById('wrap2'); 
 
    var oBtns=oWrap2.getElementsByTagName('input'); 
 
    var iNow=0; 
 
    oBtns[0].onclick=function(){ 
 

 
    oImgs[iNow].style.WebkitAnimation='1s hide'; 
 
    oImgs[iNow].className=''; 
 
    if (iNow<=0) { 
 
     iNow=oImgs.length-1; 
 
    } 
 
    else{ 
 
     iNow--; 
 
    } 
 
    oImgs[iNow].style.WebkitAnimation='1s show'; 
 
    oImgs[iNow].className='active'; 
 

 
    }; 
 

 
    oBtns[1].onclick=function(){ 
 
    oImgs[iNow].style.WebkitAnimation='1s hide'; 
 
    oImgs[iNow].className=''; 
 
    if (iNow>=oImgs.length-1) { 
 
     iNow=0; 
 
    } 
 
    else{ 
 
     iNow++; 
 
    } 
 

 
    oImgs[iNow].style.WebkitAnimation='1s show'; 
 
    oImgs[iNow].className='active'; 
 
    }; 
 
};

*{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
@-webkit-keyFrames show{ 
 
    0%{ 
 
    -webkit-transform:rotateX(180deg); 
 
    opacity: 0; 
 

 
    } 
 
    100%{ 
 
    -webkit-transform:rotateX(0deg); 
 
    opacity: 1; 
 
    } 
 
} 
 
@-webkit-keyFrames hide{ 
 
    0%{ 
 
    -webkit-transform:rotateX(0deg); 
 
    opacity: 1; 
 
    } 
 
    100%{ 
 
    -webkit-transform:rotateX(-180deg); 
 
    opacity: 0; 
 
    } 
 
} 
 

 
#wrap, #wrap2{ 
 
    width: 400px; 
 
    height: 300px; 
 
    top: 0; 
 
    position: relative; 
 
    margin: 100px auto; 
 
    -webkit-perspective:800px; 
 
} 
 
#wrap2{ 
 
    margin-top: -400px; 
 
} 
 
img{ 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    -webkit-transform-style:preserve-3d; 
 
    -webkit-transform-origin:bottom; 
 
    -webkit-transform:rotateX(180deg); 
 
    opacity: 0; 
 
} 
 

 
input{ 
 
    width: 80px; 
 
    height: 80px; 
 
    border-radius: 50%; 
 
    color: #fff; 
 
    font:20px/40px arial; 
 
    text-align: center; 
 
    position: absolute; 
 
    background: #000; 
 
} 
 

 
#wrap input:nth-of-type(1), #wrap2 input:nth-of-type(1){ 
 
    left: -200px; 
 
    top: 200px; 
 
} 
 
#wrap input:nth-of-type(2), #wrap2 input:nth-of-type(2){ 
 
    right: -200px; 
 
    top:200px; 
 
} 
 
    
 
.active{ 
 
    -webkit-transform:rotateX(0deg); 
 
    opacity: 1; 
 
}

<div id="wrap"> 
 
    <img src="img/1.jpg" class="active" /> 
 
    <img src="img/2.jpg"/> 
 
    <img src="img/3.jpg"/> 
 
    <img src="img/4.jpg"/> 
 
    <img src="img/5.jpg"/> 
 
</div> 
 
<div id="wrap2"> 
 
    <input type="button" value="Previous" /> 
 
    <input type="button" value="Next" /> 
 
</div>