Исправлен Webkit баг, связанный с поддержкой анимации и трансформации псевдоэлементов.

Автор статьи: Chris Coyier. Оригинал:http://css-tricks.com/pseudo-element-animationstransitions-bug-fixed-in-webkit/

На данный момент это уже давно известный баг движка Webkit, который не позволял применять эффект анимации или трансформации к псевдоэлементам (типа ::before и ::after). И вот, буквально позавчера, этот баг был исправлен благодаря Эллиоту Спрену (*Elliott Sprehn – инженер-программист Google, известный сторонник веб-стандартов и специалист движка Webkit.). Вы можете открыть Google Chrome Canary (*Новый инструментарий Google Chrome с ежедневными обновлениями, имитирующий отображение ресурса на мобильных устройствах.) и убедиться в том, что это действительно работает.

В комментарии к набору изменений он отметил:

«Новые компоненты DOM — псевдоэлементы :before и :after теперь поддерживают анимацию и трансформацию, но данная функция пока блокирована и будет задействована на следующем отдельном этапе.»

Компоненты DOM, неужели? Интересно, что имеется в виду под этой фразой? Можем ли мы, к примеру, привязать события к этим элементам? Лично я, просматривая их в «Инструментах разработчика» Google Chrome не увидел никаких изменений. Если кто-нибудь обладает новой информацией на этот счет – пожалуйста, поделитесь.

На заметку: Firefox постоянно поддерживает их. В Safari, скорее всего, поддержка будет реализована при следующем обновлении (их обновления, как правило, выходят позже, чем у всех других браузеров). В Opera поддержки пока нет. И сказать что либо определенное по поводу распространения этого обновления на мобильную версию Webkit, на данный момент нельзя.

В IE 10 поддерживается анимация для псевдоэлементов. Трансформация тоже, но с некоторыми странными оговорками:

.x:hover:before { /* Таким образом не работает. */ }

.x:hover {}
.x:hover:before { /* Теперь, работает. (требуется предварительная декларация :hover) */ }

Можно также ознакомиться с видео демонстрацией от Калеба Кестера.

Я с радостью обновил соответствующую таблицу.

* Примечание переводчика.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *