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?

Do you need DevOps-experts?

Your development team has a full backlog? No time for infrastructure architecture? Our DevOps team is ready to support you!

We build reliable cloud solutions with Infrastructure as code
We are experts in security, Linux and databases
We support your dev team to perform

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

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

But isn't it the future?

Do you need DevOps-experts?

Workaround

Also see