Почему пульсирующий эффект jQuery оставляет в IE зазубренный текст?

Question

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

Я попробовал следующее, но это не работает:

  $(detail).effect("pulsate", { times: 1 }, 200, function(){
     $(this).removeAttr('opacity');
  });

Кто-нибудь знает обходной путь? Я искал здесь и обнаружил аналогичную проблему с fadein и fadeout ..., решение было указано, чтобы удалить атрибут фильтра. Но я тоже попробовал, и это не сработало. Если я удаляю атрибут style , он работает, но затем я теряю свое позиционирование: -)

У кого-нибудь была эта проблема?

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

Pulsate - моя проблема, но она отлично работает в Firefox.

Answer 1

Просто добавьте 'background-color' к выцветшему элементу в вашем CSS, который соответствует фону, тогда вы не получите сумасшедшие неровные края. Сработал для меня брелок.

Answer 2

Ваше решение было на самом деле близко. Что вам нужно сделать, это удалить атрибут «filter», а не атрибут «opacity»:

$(detail).effect("pulsate", { times: 1 }, 200, function(){
     $(this).removeAttr("filter"); });

Это восстановит ваш текст после завершения пульса.

К вашему сведению, это произойдет с изображениями в формате PNG, у которых также есть области непрозрачности <100%. IE неправильно обрабатывает наложение этих областей, когда непрозрачность <100%, что, вероятно, также является причиной того, что рендеринг в чистом виде прерывается. </p>

Answer 3

Это хорошо известная проблема с Internet Explorer. Это сводится к следующему: IE не имеет встроенной поддержки непрозрачности для элементов. jQuery пытается замаскировать это с помощью «фильтров», специфичной для IE функции, в которой элемент визуализируется за пределами экрана, а затем это изображение обрабатывается с помощью небольшого кода подключаемого модуля, а окончательное изображение вставляется обратно в страница и отображается (примерно) в том же месте, что и исходный элемент. Это ... в основном работает. Но текст не сглаживается при рисовании на этом изображении.

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

Пожалуйста, смотрите:

• IE теряет ClearType
• Функция переключения JQuery, отображающая странный текст в IE (теряет ClearType?)

Answer 4

Я обнаружил похожую вещь, когда Pulsate оставил стиль непрозрачности, который переопределял непрозрачность, которая была установлена ​​в предыдущем CSS. Это было в FireFox 8, с jQuery UI 1.8.16. Оригинальный код Марка работал с одной маленькой модификацией:

.removeAttr('style')

вместо «непрозрачность». Недостатком является то, что если у вас есть какой-либо другой жестко запрограммированный стиль, он также будет удален.

Answer 5

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

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

Answer 6

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

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