Масштабируемые прозрачные PNG теряют сглаживание после анимации jQuery в браузерах Webkit - PullRequest
Новая
       8

Масштабируемые прозрачные PNG теряют сглаживание после анимации jQuery в браузерах Webkit

3 голосов
/ 07 декабря 2011

У меня есть скрипт, который размещает эти круглые значки на карте, вы наводите на них курсор, они появляются, появляется текст и т. Д. Значки масштабируются относительно их положения на карте, т. Е. Расстояния от 0 до ось Y. Я попытался установить масштаб с помощью атрибутов ширины и высоты CSS, а также с помощью ширины и высоты html в теге img, и все еще имею ту же проблему:

В основном, в состоянии покоя, например при первой загрузке страницы или при переходе пользователя между вкладками, изображения (транс PNG) сглаживаются. Однако, когда вызывается функция hover () и, следовательно, функция animate (), изображения внезапно становятся неровными и ужасными. Я заметил, что такое поведение не существует в Firefox, но существует в Safari и Chrome. Я не знаю, связано ли это с Webkit, jQuery или просто с самим javascript, но, возможно, кто-то мог бы пролить свет на то, что Google ничего не дал. Какие-нибудь мысли? :)

Обратите также внимание, что нижний левый и нижний правый значки выглядят хорошо на обоих прикрепленных скриншотах - они немасштабированы!

Icons before animation Icons after animation

Большое спасибо :) Мэтт

1 Ответ

0 голосов
/ 07 декабря 2011

Я могу только догадываться об этом, но я предполагаю, что Gecko и WebKit используют разные алгоритмы масштабирования для изображений. таким образом, он вообще не имеет ничего общего с javascript, jquery или png.

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

граница только что перепутана, что обычно является результатом неправильного алгоритма масштабирования.

попробуйте следующее, чтобы подтвердить это предположение: 

<img src="youricon.png" width="90%" height="90%">

и сравните результат в двух браузерах. вы должны увидеть ту же проблему.

возможные решения:

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