CSS-анимация для мыши и прикосновения (iOS)

Вот пример 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?

Ответы

Ответ 1

Итак, проблема, с которой вы столкнулись, заключается в следующем: " :active псевдокласс совпадает с тем, когда пользователь активирует элемент". Отдельный элемент <div> не может быть активирован пользователем и поэтому не будет соответствовать псевдо-классу :active.

Если вы посмотрите совместимость браузера в статье :active MDN, вы увидите, что:

[1] По умолчанию Safari Mobile не использует активное состояние: если не существует обработчик события touchstart соответствующего элемента или <body>.

MDN имеет список псевдо классов, который можно использовать, и вы можете найти тот, который лучше подходит для вашей ситуации или добавляет touchstart событие должно сделать трюк в Safari.

Мне удалось заставить ваш plnkr работать очень быстро, изменив элемент <div class="hover-block"></div> на <button class="hover-block"></button> и изменив .hover-block:active { на .hover-block:focus {. Я также добавил display: block; border: 0; в .hover-block.

Вы по понятным причинам не захотите изменить свой <div> на <button>, чтобы заставить ваш эффект работать, но используя элемент, который можно активировать, используя другой псевдокласс или добавив событие который позволяет активировать ваш целевой браузер, вы должны иметь возможность добиться эффекта, который вы ищете на мобильных устройствах.

Надеюсь, что это поможет!

Ответ 2

В вашем html вместо <body> сделайте <body ontouchstart=""> Или в html5, просто <body ontouchstart>