Вопрос по retina-display, css3, css, filter, css-transitions – Фильтр CSS на дисплее Retina: нечеткие изображения

14

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

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

Мой 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%), изображение становится размытым на дисплеях сетчатки (с переходами или без них…) это просто размыто, все время). Я предполагаю, что это Filter-Bug.

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

В вашей скрипке фильтр насыщенности просто перекрывает оттенки серого. Вы должны избавиться от насыщенности. Это не решит проблему резкости, но, по крайней мере, ваш фильтр будет работать :) robertp
Когда я пробую демонстрацию с добавленным фильтром насыщения, он просто не видит переход. Это просто 0-1 без перехода в 2s, что странно. robertp
Я уже подал ошибку для этой проблемы:bugs.webkit.org/show_bug.cgi?id=93471 Erik Aigner
Вы можете связать фильтры так: 'filter: grayscale (0.5) blur (1px) saturate (2);' и т.д.. :jsfiddle.net/meo/dya2t/9 но я не знаю, если это решит вашу проблему, у меня нет экрана сетчатки meo
@ Meo: фильтры цепочки, к сожалению, не помогают, спасибо в любом случае albuvee

Ваш Ответ

3   ответа
4
-webkit-transform работал для меня, но это обрезало края изображения; это также работало, но без отсечения. Спасибо! Brent Royal-Gordon
Этот сделал трюк для меня, где-webkit-transform: translateZ(0) не спасибо thomasstephn
38

-webkit-transform: translateZ(0); 

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

Как ты это понял? Это круто. ns1
Я могу подтвердить, что этот обходной путь работает отлично. Я верю, что это правильный ответ, так как вопрос был «как я могу это исправить», а не «в чем здесь проблема» :) mezis
0

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

Если вы бросаете-webkit-filter на PNG в Chrome независимо от настроек принтера или печати, он печатает изображения в правильном размере, но с пониженной частотой дискретизации до 70 точек на дюйм. Это видно и в предварительном просмотре.

-webkit-transform: translateZ(0); починил это.

Репродукция мясного пространства:печать одного и того же пакета PNG с исправлением и без него

Похожие вопросы