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, все браузеры), он ничего не делает на ощупь. Я совершенно уверен, что точно такой же подход (block element,:active С pointer-events: none плюс :hover) работал для меня в iOS 8 раньше. Как это можно исправить?

похоже пустой touchstart/touchend JS обработчик событий или ontouchstart/ontouchend атрибут можно активировать сенсорное поведение на iOS (не могу быть уверен, но возможно, что это случилось со мной раньше). Это известное решение проблемы или есть менее хакерские, какие версии iOS затронуты?

11
css css3 ios mobile-safari

2 ответов

поэтому вопрос, вы работаете в такой:":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 { to .hover-block:focus {. Я также добавил display: block; border: 0; to .hover-block.

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

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

3

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

3