Вот пример plnkr.
В основном существует такой стиль
.hover-block {
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
.hover-block:active {
pointer-events: none;
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
.hover-block:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
Я ищу поддержку Evergreen и IE10/11, Chrome для Android (4.4+), Mobile Safari (iOS 7+), и это не должно повредить другие события касания (прокрутка прокрутки).
Кажется, что он работает как на эмуляции устройств Android, так и на Chrome, желательно нелицеприятное преобразование при касании.
Но каким-то образом этот плункер не работает на iOS webkit (iOS 8, все браузеры), он ничего не делает на ощупь. Я совершенно уверен, что точно такой же подход (элемент блока :active
с pointer-events: none
plus :hover
) работал у меня в iOS 8 раньше. Как это можно исправить?
Он выглядит как пустой touchstart/touchhend обработчик события JS или атрибут ontouchstart
/ontouchend
может активировать поведение прикосновений в iOS (не может быть уверен, но он возможно, что это случилось со мной раньше). Является ли это известным решением проблемы или есть менее хакерские версии, на которые повлияли версии iOS?