Фильтр CSS на экране Retina: нечеткие изображения

Когда вы применяете -webkit-фильтр и -webkit-переход к изображению и изменяете фильтр при наведении, переход изображения выполняется хорошо, но тогда изображение становится действительно нечетким.

Примечание: Это происходит только на Retina-Displays - никаких проблем с "нормальными" ppi-дисплеями, но нечеткими, например, с новым MacBook Pro с дисплеем Retina.

Мой CSS (без префиксов поставщика):

img {filter:grayscale(1);filter:saturate(0%);transition:2s ease;width:200px;height:200px}
img:hover {filter:grayscale(0)}

Примечание: чтобы увидеть эффект/ошибку, я установил продолжительность перехода на 2 секунды

Ознакомьтесь с моей демонстрацией: http://jsfiddle.net/dya2t/7/

Как я могу это исправить?

РЕДАКТИРОВАТЬ: Если я установил фильтр: hover-state для фильтрации: ни один из его острых!:-) НО, конечно, переход больше не работает: -/ Как только на изображении будет фильтр (даже если значение равно 0 или 0%), изображение становится нечетким на сетчатых дисплеях (с переходами или без них... его просто размыто, все время). Я думаю, это фильтр-ошибка.

Это известная ошибка в WebKit https://bugs.webkit.org/show_bug.cgi?id=93471

Ответ 1

Мне удалось обойти эту проблему, применив к тегу img:

-webkit-transform: translateZ(0);

http://jsfiddle.net/78qbn/3/

Ответ 2

дочерние элементы с -webkit-backface-visibility: hidden; разрешит это.

http://codepen.io/amboy00/pen/Bxbrd

Ответ 3

Присоединился к stackoverflow, чтобы сообщить другим, так как я должен был сам это выяснить: эта ошибка также проявляется (но по-разному) при попытке печати изображений в хроме. Они превращают супер пикселированные!

Если вы набрасываете -webkit-filter на PNG в хроме, независимо от параметров принтера или печати, он печатает изображения/с в правильном размере, но с понижением до 70 dpi. Он также отображается в предварительном просмотре печати.

-webkit-transform: translateZ(0); зафиксировал его.

Проигрывание Meatspace: печатает один и тот же стек PNG с исправлением и без него