13

I have noticed in my many years of web design that CSS's box shadow is enormously expensive with resources and causes many old phones to lag severely; but is that is the case with text-shadow? When is it okay to use text-shadow, and how is it rendered?

Joshua Sandoval
  • 441
  • 1
  • 6
  • 13
  • I wouldn't be surprised if it was. But I am indeed curious if they use e.g. similar blurring and color composition algorithms. – BoltClock Oct 05 '15 at 12:37
  • @BoltClock ...at least you can fake box shadow with relatively few tags. I was incredibly surprised nobody else asked this question. Perhaps I (or we) should look at the source code, but I have no idea where to get access to that. – Joshua Sandoval Oct 05 '15 at 12:50
  • I bet it's even more expensive, since the shapes of the characters are more complex than rectangles. – Josiah Keller Oct 05 '15 at 13:12
  • Many browsers are completely Free & Open Source, so you can download the sources to them, including all the libraries, at least for Linux. Example: http://ftp.mozilla.org/pub/mozilla.org/firefox/releases/41.0.1/source/ – Mr Lister Oct 05 '15 at 13:18

1 Answers1

5

CSS's box shadow is enormously expensive with resources and causes many old phones to lag severely; but is that is the case with text-shadow?

I guess the short answer is yes: text-shadow is expensive for the same reasons box-shadow is.

It looks like this article confirms that text-shadow can cause performance issues: http://codeincomplete.com/posts/2011/8/11/noglow/.

There is also this question that seems related and has an accepted answer: text-shadow (and other css3) causes scroll lag.

When is it okay to use text-shadow

I guess this depends on your audience and wether they have powerful enough hardware.

…and how is it rendered?

This seems to ask for implementation details which are probably browser/platform-specific, …and probably irrelevant to the question for the most part. :)

Community
  • 1
  • 1
Vlad GURDIGA
  • 1,284
  • 2
  • 14
  • 18