изменение размера изображения дает небольшую, короткую пикселизацию в браузерах WebKit

Question

jsfiddle: http://jsfiddle.net/UenFN/. Обратите внимание на небольшое, короткое пикселирование после анимации.Эта ошибка возникает только в браузерах WebKit.

Используя jQuery, у меня изображение уменьшено в размере.Новые размеры - это точно половина старых.Однако сразу после изменения размера изображение выглядит слегка пикселизированным, а затем примерно через 2 секунды оно выглядит лучше.

Как устранить эту проблему?

РЕДАКТИРОВАТЬ: Все еще нетпрогресс.Любая идея приветствуется.

Answer 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 Обратите внимание на то, как логотип временно пикселируется при изменении размера браузера.

мой! наслаждайтесь!

Answer 2

Я обнаружил, что единственный раз, когда он не делает это, это когда размер после завершения равен собственному размеру изображения.

от 150 до 300 пикселей, без пикселизации ...

http://jsfiddle.net/UenFN/1/

и от 450 до 300 пикселей, по-прежнему нет пикселизации ...

http://jsfiddle.net/UenFN/2/

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

Answer 3

У меня была точно такая же проблема. Я изменил * .jpg, размер которого я анимировал, на * .svg, и пикселизация исчезла.

Answer 4

Решено в 2013 году. https://bugs.webkit.org/show_bug.cgi?id=74600

image-rendering: optimizeQuality;

Answer 5

Чтобы это исправить, я вставил одно и то же изображение во второй раз, но с размерами, которые я хочу использовать. Через миллисекунду после анимации я заменяю основное изображение ранее скрытым изображением.

jsfiddle: http://jsfiddle.net/wLwrc/1/

Answer 6

Вы можете использовать изображение, соответствующее размерам, которые вы собираетесь.Если вы не можете этого сделать, вы можете использовать метод обратного вызова, чтобы заменить измененное изображение изображением, которое соответствует размеру новых измерений.То, что вы делаете, ничем не отличается от растяжения изображения (на самом деле это именно то, что вы делаете), поэтому будет пикселизация.