Вопрос по css, filter, css3, css-transitions, retina-display – Фильтр 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
Я уже подал ошибку для этой проблемы:bugs.webkit.org/show_bug.cgi?id=93471 Erik Aigner
Я нене вижу здесь никакого перехода ... Обратите внимание, что яиспользую Chrome ... user752723
@Meo: фильтры цепочки, к сожалению, нев любом случае, спасибо albuvee

Ваш Ответ

3   ответа
4

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

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

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

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

-webkit-transform: translateZ(0); 

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

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

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

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

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

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

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