Изменение размера изображения дает небольшую, короткую пикселизацию в браузерах WebKit
jsfiddle: http://jsfiddle.net/UenFN/. Обратите внимание на небольшое, короткое пикселирование после анимации. Эта ошибка происходит только в браузерах WebKit.
Используя jQuery, у меня размер изображения уменьшился. Новые размеры - это точно половина старых. Однако сразу после изменения размера изображение выглядит слегка пиксельным, а через 2 секунды оно выглядит лучше.
Как я могу исправить эту проблему?
РЕДАКТИРОВАТЬ: Все еще нет прогресса. Любая идея приветствуется.
6 ответов
Чтобы это исправить, я вставил одно и то же изображение во второй раз, но с размерами, которые я хочу использовать. Через миллисекунду после анимации я заменяю основное изображение ранее скрытым изображением.
jsfiddle: http://jsfiddle.net/wLwrc/1/
Решение состоит в том, чтобы включить аппаратное ускорение в Webkit.
img {
-webkit-transform: translate3d(0, 0, 0);
}
У меня есть небольшая библиотека, которая изменяет размер изображения и HTML, чтобы всегда соответствовать родительскому div. Safari дала мне свой уникальный способ сделать быстрый и грязный пас перед бикубическим. Принудительное аппаратное ускорение решило проблему. В моем случае, когда я много изменяю размеры, я замечаю некоторое снижение производительности, но в итоге результат капитального ремонта становится более привлекательным.
Вы можете проверить это исправление здесь: http://www.visualfox.me/app/nanjing-2014 В Safari изображение, используемое в качестве маски, никогда не пикселируется, независимо от его изменения, увеличения или уменьшения (просто измените размер браузера, чтобы проверить его).). Вы можете сравнить это с другой демонстрацией, в которой не используется исправление: http://www.visualfox.me/app/bold Обратите внимание на временную пикселизацию логотипа при изменении размера браузера.
мой! наслаждаться!
Я обнаружил, что единственный раз, когда он этого не делает, это когда размер после завершения является собственным размером изображения.
от 150 до 300 пикселей, без пикселей...
и от 450 до 300 пикселей, до сих пор нет пикселизации...
Таким образом, исправление или обходной путь будет заключаться в том, чтобы убедиться, что ваш конечный размер соответствует исходному размеру изображения, где это возможно.
Решено в 2013 году. https://bugs.webkit.org/show_bug.cgi?id=74600
image-rendering: optimizeQuality;
Вы можете использовать изображение, соответствующее размерам, которые вы собираетесь. Если вы не можете этого сделать, вы можете использовать метод обратного вызова, чтобы заменить измененное изображение изображением, которое соответствует размеру новых измерений. То, что вы делаете, ничем не отличается от растяжения изображения (на самом деле это именно то, что вы делаете), поэтому будет пикселизация.
У меня была точно такая же проблема. Я изменил *.jpg, размер которого я анимировал, на *.svg, и пикселизация исчезла.