CODEWITHSUNDEEP
javascripthtmlcss
Harry Northover
Harry Northover

Reputation: 572

CSS Text-shadow performance issues.

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.

Upvotes: 2

Views: 2330

Answers (1)

Nightfirecat
Nightfirecat

Reputation: 11610

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.

Upvotes: 5

Related Questions