I've dropped in the code below but basically there's an element on the page. On hover transform: scale(1.2) is applied. The element has a transition on it. The main intention was that on transitionend some logic needed to be executed and so a transitionend event handler is attached. Now in all non Blink powered browsers is works absolutely fine. But in Chrome and Opera, if you keep moving the mouse, off the element, the event does not fire until you stop moving the mouse, despite the transition finishing some time ago. Anyone come across this before and have a solution?
<!DOCTYPE html>
<html class=''>
<head>
<meta charset='UTF-8'><meta name="robots" content="noindex">
<link rel="canonical" href="http://codepen.io/SayTen/pen/zvNbOM" />
<style class="cp-pen-styles">
#transitioner {
margin: 50px;
width: 100px;
height: 100px;
transition: transform 0.2s;
display: block;
background-color: black;
}
#transitioner:hover {
transform: scale(1.2);
}
body {
color: black;
font-family: sans-serif;
}
</style>
</head>
<body>
<div>This demos an issue in Chrome where transform transitions do not end reliably. Mouse over the element and keep the mouse still and it fires immediately, keep moving the mouse and it won't fire until you stop.</div>
<div id="transitioner"></div>
<div id="logger"></div>
<script>
window.addEventListener('load', function () {
var logger = document.getElementById('logger');
document.getElementById('transitioner').addEventListener('transitionend', function (e) {
var date = new Date();
logger.appendChild(document.createTextNode(date.getTime() + ': Event Fired'));
logger.appendChild(document.createElement('br'));
});
});
</script>
</body>
</html>
