javascript/css transform + z-index проблема с google chrome

некоторая проблема с google хром, центральное изображение must be on top, но они этого не делают.javascript/css transform + z-index проблема с google chrome

Пожалуйста, попробуйте следующий код, чтобы повторить эту проблему:

<!DOCTYPE html> 
<html> 
<head> 

<script> 

function big_image(myelem) { 
myelem.style.webkitTransform = 'scale(2.0)'; 
myelem.style.zIndex = '99'; 
} 


function orig_image(myelem) { 
myelem.style.webkitTransform = 'scale(1.0)'; 
myelem.style.zIndex = 'auto'; 
} 

</script> 


</head> 
<body> 

<img src="http://www.pewforum.org/files/2015/10/PF_15.10.05_PostPapal_promo260x260.jpg" onmouseover="big_image(this);" onmouseout="orig_image(this);"> 

<img src="http://www.pewforum.org/files/2015/10/PF_15.10.05_PostPapal_promo260x260.jpg" onmouseover="big_image(this);" onmouseout="orig_image(this);"> 

<img src="http://www.pewforum.org/files/2015/10/PF_15.10.05_PostPapal_promo260x260.jpg" onmouseover="big_image(this);" onmouseout="orig_image(this);"> 

</body> 
</html>

Как исправить/преодолеть? Спасибо.

источник

2015-11-02 iNio

Существует ошибка, связанная с параметрами z-index и transform.

Лучший способ избежать этого, будет сбросить преобразования свойство onmouseout:

function big_image(myelem) { 
    myelem.style.webkitTransform = 'scale(2.0)'; 
    myelem.style.zIndex = '2'; 
} 


function orig_image(myelem) { 
    myelem.style.webkitTransform = 'none'; 
    myelem.style.zIndex = '1'; 
}

протестирована и работает, как ожидалось в Chrome/Opera.

источник

2015-11-02 21:57:31 divix

javascript/css transform + z-index проблема с google chrome

ответ

Смежные вопросы