javascript/css transform + z-index issue with google chrome

Question

some issue with google chrome, center image must be on top , but they don't.

Please try following code to repeat this issue:

<!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>

How to fix / overcome it? Thanks.

Answer 1

There is a bug to do with z-index and transform properties.

The best way to avoid it, will be to reset transform property 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';
}

Tested and works as expected on Chrome/Opera.

javascript/css transform + z-index issue with google chrome

Question

1 answers

solution1
0 ACCPTED 2015-11-02 21:57:31

javascript/css transform + z-index issue with google chrome

Question

1 answers

solution1 0 ACCPTED 2015-11-02 21:57:31

solution1
0 ACCPTED 2015-11-02 21:57:31