Home/ Questions/Q 6209585
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T06:00:42+00:00

I’m working on a project that requires a few h1 tags to have text-shadow

  • 0

I’m working on a project that requires a few h1 tags to have text-shadow applied to them. This is leading to some real performance issues, the FPS is under 5 🙁

I have the text getting blurred at the top of the page when it first comes into view, then the closer it reaches the middle of the window, it comes into focus, the blurs out again when the user continues scroll up.

This project only needs to work in Chrome (v12) and I was curious to see if there we’re any fixes for the issue, or alternative methods of blurring text with less of a hit of performance?

Cheers.

Update:
Here’s my css that’s being applied initally:

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

Then I am manipulating this using Javascript:

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

This is being applied to several large (86px font-size) text elements.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Dynamic CSS3 text shadows are already fairly heavy on CPU strain, as far as browser rendering goes, and adding JavaScript that causes the window to update that value on every possible frame of scrolling at the same time, causing the browser to re-render with different settings will cause this.

    As far as I know, there is no fix if you need this exact effect to work, because of the heavy client-side computing required for both parts of the effect.

    • 0