Read more

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

Avatar
Henning Koch
August 11, 2013Software engineer at makandra GmbH

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?

Illustration online protection

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

  • Prevents you from data breaches and liability risks
  • Upgrade at your own pace
  • Works with modern Rubies
Read more

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

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