Posted over 8 years ago. Visible to the public. Deprecated.

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

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:

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

Also see

Your development team has a full backlog of feature requests, chores and refactoring coupled with deadlines? We are familiar with that. With our "DevOps as a Service" offering, we support developer teams with infrastructure and operations expertise.

Owner of this card:

Avatar
Henning Koch
Last edit:
3 months ago
by Henning Koch
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Henning Koch to makandra dev
This website uses short-lived cookies to improve usability.
Accept or learn more