Проблемы с текстовыми тенями в CSS

Question

Я работаю над проектом, которому требуется несколько тегов h1, чтобы к ним применялась тень текста. Это приводит к некоторым реальным проблемам производительности, FPS меньше 5 :(

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

Этот проект должен работать только в Chrome (v12), и мне было любопытно посмотреть, есть ли у нас какие-либо исправления для этой проблемы, или альтернативные методы размытия текста с меньшим падением производительности?

Приветствия.

Обновление: Вот мой CSS, который применяется изначально:

color: transparent;   
text-shadow: 0px 0px 1px #FFFFFF;

Затем я манипулирую этим, используя Javascript:

$(e.id).css('text-shadow', "0px 0px " + blurAmount + "px #FFFFFF");

Это применяется к нескольким большим (86px font-size) текстовым элементам.

Answer 1

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

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