Какая-то дурь овладела хромом...
При на ведении на элемент hover или обработчик клика срабатывает через раз. Как я заметил это распространяется на элементы, расположение которых мы крутили с помощью JS. Например, трансформация.
Очевидно, что хром тупо не перерисовывает внутренние представление DOM.
Если покрутить немного мышкой на нужном элементе, кликнуть где-то рядом, вызвать hover на другом статическом элементе. То все отдупляется.
P.S. Понятно что это баг. Просто перед тем как убедиться в том, что это баг пришлось перелапатить верстку. Вздохнув с горечью и облегчением. Решил поделится им с toster-ом :)
P.S. На jsfiddle баг отловить можно, но сложнее. Поэтому приведу просто HTML-код
Чтобы он здесь сработал нужно загрузить эту страницу и нажать F5.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#test{
position: fixed;
transform: translate3d(0,0,0);
transform: scale(0.1);
width: 70%;
margin: auto;
height: 30%;
background: blue;
cursor: pointer;
transition: transform .4s ease-out;
}
#test:hover{
background: green;
}
</style>
</head>
<body>
<div id="test"></div>
<script>
setTimeout(function(){
document.getElementById('test').style.transform = "translate3d(0,40px,0)";
document.getElementById('test').style.transform = "scale(0.5)";
},100)
</script>
</body>
</html>
Просто сейчас 3 часа ночи и пример с модальным окном мне писать лень...:)
Простой
