Box-shadow's 3rd value dramatically decreases page rendering

Problem

Using the box-shadow property in Chrome or Firefox, if the 3rd input is a large number, it nearly freezes the browser in Chrome and it slows down Firefox. Is this a bug?

-moz-box-shadow: 0 0 400px #446b6b; -webkit-box-shadow: 0px 0px 400px #446b6b;

Problem courtesy of: delphi

Solution

Yeah it is: https://bugs.webkit.org/show_bug.cgi?id=22102

I believe it's been patched and should be available soon :-)

Workarounds include: less shadow or use a png for the shadow..

The problem is they're not caching the shadow so it's getting redrawn whenever you scroll..

Solution courtesy of: Ben Collier

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.