Many box shadows will make your app unusable on smartphones and tablets

See Fixed elements and large CSS box shadows can bring browsers to a crawl

Box shadows are awesome. Unfortunately they are also very costly to render. You will rarely notice the rendering time on a laptop or desktop PC, box shadows can make your app completely unusable on smartphones and tables. By "unusable" I mean "device freezes for 10 seconds after an user action".

But isn't it the future?

Not yet. Eventually mobile devices will become powerful enough to make this a non-issue. However, currently (August 2013) even high-end smartphones can become very unresponsive with a box-shadow heavy application.

Workaround

A quick workaround is to simply not render box shadows on mobile devices. To do so, use our touch device detection card to apply a touch_device class to the document <body>. Now you can add a rule to your CSS/Sass:

body.touch_device
  *
    -moz-box-shadow: none !important
    -webkit-box-shadow: none !important
    box-shadow: none !important

Also see

Fixed elements and large CSS box shadows can bring Firefox to a crawl

Henning Koch

makandra.de

Say thanks

Last edit

2016-05-25

Henning Koch

License

Source code in this card is licensed under the MIT License.

Posted by Henning Koch to makandra dev (2013-08-11 16:24)