@bozilly

Что делать с багом в Хроме?

При трансформации элемента hover(+событие click) то срабатывает, то нет.
258ae4330f524b48995ca49434bb9d7b.gif
Этот пример работает при перезагрузке страницы или переходе на нее по ссылке.
В jsfiddle не отловить.
Вот пример данного кода:
<!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>

В модальных окна, которые как-то круто появляются трансформом та же история.

Chrome все-таки самый популярный браузер. Хотелось бы хоть как-то пофиксить...

P.S. Bag report писать не умею :)
  • Вопрос задан
  • 267 просмотров
Пригласить эксперта
Ответы на вопрос 1
batareika
@batareika
Попробуйте добавлять pointer-events: auto после того, как анимация закончится

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

		setTimeout(function(){
			document.getElementById('test').style.pointerEvents = "auto";
		},400)
	}
</script>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы