When entering a mouse in Chrome

Question

I have this trigger code for input code (JavaScript for listening to mouse input and CSS for transitions), and lately it's very funny in Chrome; tested on v 44.0.2403.157m without any errors in the console. Acting funny, I mean that the effect of fading out is sometimes overlooked.

var shown = true;
var parent = document.querySelector('.parent');
var child = document.querySelector('.child');

parent.addEventListener('mouseenter', function(){
  child.style.opacity = shown ? 0 : 1;
  shown = !shown;
});

* {
  margin: 0;
  padding: 0;
}

.parent {
  width: 100%;
  margin: 10px auto;
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  transition: opacity 0.5s linear;
}


p {
  padding: 1em;
}

<div class="parent">
<img src="http://www.fundraising123.org/files/u16/bigstock-Test-word-on-white-keyboard-27134336.jpg" alt="" width="500px" height="auto" />

<div class="child">
<img src="http://maui.hawaii.edu/tlc/wp-content/uploads/sites/53/2013/11/testing.jpg" alt="" width="500px" height="auto" />
</div>
</div>

Run code

The code should work like in this example. I would really appreciate that you have alternatives and thoughts. Thanks

Answer 1

, , . , Firefox (38.0.5), Edge (20.10240.16384.0). , , Chrome , .