Search code examples
cssperformancebox-shadow

Is CSS's efficiency with text-shadow as bad as box-shadow?


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?


Solution

  • 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 (at least for elements with frequent re-renders): 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. :)