При использовании свойства CSS zoom, как я могу убедить браузер использовать "ближайший сосед" вместо "билинейного" или любых других более сложных алгоритмов масштабирования?
Моя настройка - это div, который содержит холст, а div получает свой набор масштабирования через JavaScript, чтобы быть <div style="zoom:3200%">...</div> и для получения ближайшего соседа, я использую image-rendering: -webkit-optimize-contrast в своем CSS. Приложение доступно здесь ( "z" увеличивает масштаб, "shift-z" увеличивает масштаб), а мой css здесь
Вот желаемый эффект в Chrome на OSX (масштаб установлен на 3200%):
Но вот то же самое в Chrome на Windows 7:
В обоих случаях это "vanilla" Chrome (версия 15.x.x) из коробки, флаги эксперимента не включены.
Как я могу убедить Chrome в Windows использовать ближайшего соседа? В этом случае, как я могу убедить все браузеры? Safari также не использует ближайшего соседа (пока приложение работает только в браузерах на основе WebKit)
Свойство CSS image-rendering влияет на Chrome/OSX и дает мне желаемый эффект. Но Chrome/Windows и Safari (5.1)/OSX оба, похоже, полностью игнорируют его. Что-то подсказывает мне, что мне просто не повезло, но я решил, что спрошу.
Использование zoom в контейнере div настолько просто и прекрасно работает в Chrome/OSX, если я должен прибегать к масштабированию своих полотен внутри, я тоже могу это сделать. Но предпочли бы буквально одну линию решения кода, если это было возможно!
UPDATE: Я нашел использование image-rendering: optimizeSpeed. Однако это похоже на Chrome/Windows. Если я установил его на слишком много элементов (я изначально пытался, мои контейнеры и все холсты), он не вступает в силу. Но если я применяю его только к canvas, я получаю 98% пути туда.
Теперь моя проблема - это первый раз, когда я рисую при увеличении, он работает отлично, все остальные последующие действия рисования нечеткие, пока они происходят, а затем возвращаются к правильному ближайшему соседу (мое приложение рисует в холст с нуля сначала, затем примените рисунок к реальному холсту). В холсте царапин есть что-то странное, когда Chrome настаивает на использовании билинейного. Я думаю, с некоторыми копать я могу решить это.
UPDATE2: Похоже, что image-rendering в Chrome/Windows просто не реализована и немного глючит. Теперь я могу подтвердить, что значения optimizeSpeed и optimizeQuality не поддерживаются в Chrome/Windows. Если вы установите для них рендеринг изображений, Chrome будет игнорировать набор. Chrome/Windows распознает -webkit-optimize-contrast, однако он не использует его последовательно. Chrome будет переключаться между тем, что выглядит как билинейный алгоритм масштабирования и ближайший сосед почти случайным образом. Я не смог последовательно использовать Chrome для использования ближайшего соседа.
Я попробовал сборку Chromium 17 на Windows, и она ведет себя одинаково.
Firefox (8.0.1) выглядит довольно многообещающим, хотя, как кажется, он чтит -moz-crisp-edges неплохо. Первоначально я предназначался для Chrome как "идеальный браузер" для этого приложения, я мог бы просто переключиться на Firefox.
В конце концов, кажется, что правильная поддержка image-rendering находится в стадии разработки для Chrome, но пока не совсем там. Сам WebKit утверждает, что полностью поддерживает все значения рендеринга изображений, но я предполагаю, что сборка WebKit, используемая Chrome, не совсем обновилась до этого нового исправления.
