Я создаю веб-сайт с помощью слайд-шоу и использую history.replaceState(), чтобы добавить хеш и счетный номер к URL при переходе по изображениям.
При наведении курсора на кнопку «Далее» в слайд-шоу курсор изменяется на пользовательскую стрелку с помощью CSS. Когда я нажимаю кнопку, вызывается history.replaceState() - что сбрасывает курсор к значению по умолчанию. Как только я немного переместил курсор, снова появится нужная стрелка.
Это происходит только в Safari - Chrome и Firefox работают нормально. Любые идеи о том, почему это происходит и как этого избежать?
Вот фрагмент проблемы. Его нужно сохранить в свой собственный файл, поскольку вы не можете изменить состояние истории родителя из iframe:
<!DOCTYPE html>
<html>
<head>
<style>
#click {
border: 1px solid black;
text-align: center;
padding: 1em;
}
#click:hover {
cursor: crosshair;
}
</style>
</head>
<body>
<div id="click">
Hover and click me and change history!
</div>
<div id="hash">
No hash
</div>
<script type="text/javascript">
var i = 1;
document.querySelector('#click').addEventListener('click', function() {
history.replaceState(null, null, '#' + i);
document.querySelector('#hash').innerHTML = "We now have a hash: " + document.location.hash;
i++;
});
</script>
</body>
</html>