What to do with a bug in Chrome?

B

bozilly2015-09-27 06:40:12

css

bozilly, 2015-09-27 06:40:12

When transforming an element, hover(+click event) sometimes works, sometimes it doesn't.

This example works when reloading the page or following a link to it.
Can't be caught in jsfiddle.
Here is an example of this code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
  #test{
    position: fixed;
    top:0px;
    left: 40%;
    height: 150px;
    width: 500px;
    background-color: red;
    -webkit-transform: translate3d(0,0,0);
    transition: transform .4s ease-out;
  }
  
  #test:hover{
    background: green;
  }
</style>
</head>
<body>
<div id="test"></div>
<script>
window.onload = function(){
  document.getElementById('test').style.webkitTransform = "translate3d(0px, 250px, 0px)";
  }
</script>
</body>
</html>

In modal windows that somehow coolly appear with a transform, the same story.
Chrome is still the most popular browser. I would like to somehow fix it ...
PS Bag report I can’t write :)

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

V

Valery, 2015-09-27
@batareika

Try adding pointer-events: autoafter the animation ends

<script>
  window.onload = function(){
    document.getElementById('test').style.webkitTransform = "translate3d(0px, 250px, 0px)";

    setTimeout(function(){
      document.getElementById('test').style.pointerEvents = "auto";
    },400)
  }
</script>