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


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


Yeah it is:

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


There is currently no discussion for this recipe.

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