Webkit + jQuery + SuperBGImage: полные браузерные изображения без сглаживания - PullRequest
Новая
       20

Webkit + jQuery + SuperBGImage: полные браузерные изображения без сглаживания

4 голосов
/ 20 августа 2011

Это изображение лучше всего иллюстрирует проблему: screenshot comparison

Я настраиваю тему WordPress, которая использует SuperBGImage.В Safari 5.1 и Chrome 13 при изменении размера окна браузера изображения не сглаживаются плавно, и артефакты хорошо видны.Вы можете легко сравнить демонстрацию SuperBGImage с производственной площадкой ...

Демо SuperBGImage против Мой проект

Я добавил демонстрационные изображенияна сайт WordPress (персональная категория) для прямого сравнения.Изображение вишни является наиболее очевидным.

Я работал над этим некоторое время, и безуспешно пытался сделать следующее:

  1. Попытался добавить границу 2pxк слайд-шоу изображений, которые решили едва связанную проблему с преобразованиями CSS3.
  2. Обращенный алгоритм масштабирования, который я изменил, чтобы никогда не обрезать изображения.
  3. Добавлены точно такие же файлы изображений, которые использовались в демонстрации.
  4. Попытка добавить box-shadow для запуска сглаживания.
  5. Различает все модифицированные JS и CSS, пытаясь найти потенциальный недосмотр.(image-rendering: optimizeQuality; и -ms-interpolation-mode: bicubic; остались неизменными.
  6. Подтверждено, что SuperBGImage работает, как и ожидалось, с jQuery 1.3.2 (демо) и 1.6.2 (проект).
  7. Встроенныйупростили демонстрацию и подтвердили, что проблема не в моем модифицированном SuperBGImage JS. (Единственное отличие - метод обрезки.)

При просмотре демонстрации SuperBGImage вы заметите, что сглаживание происходит через полсекунды послеВы выпустили скорректированное окно. Этот тонкий сдвиг отсутствует в моем проекте, хотя раньше он работал. Кто-нибудь знает, что может вызвать эту разницу?

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

Для тех, кто хотел бы поиграть с простой демонстрацией: http://jsfiddle.net/4ZcPF/

1 Ответ

0 голосов
/ 29 августа 2011

Ответ заключается в использовании этого свойства CSS3:

-webkit-optimize-quality

Это правильное решение, хотя оно может быть или не быть эффективнымпо следующим причинам:

  • Качество интерполяции до недавнего времени считалось деталью реализации (то есть браузер мог иметь случайные результаты и быть действительным по правилам органов стандартизации ).

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

  • Патч веб-набора был только что зарегистрирован, чтобы поддержать его в мае 2011 года, так что время для его фактическогообновление Safari, которое будут у ваших пользователей, займет некоторое время.

IE и Firefox уже некоторое время имеют рабочие решения в рамках собственных свойств CSS.

В конечном итоге это свойство будетудалите префикс webkit и станьте стандартом для всех браузеров.

Если вы хотите узнать подробности разработки, посмотрите эту ветку: http://code.google.com/p/chromium/issues/detail?id=1502

...