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".
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.
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