Posted over 8 years ago. Visible to the public.
Fixed elements and large CSS box shadows can bring browsers to a crawl
Browser rendering engines are very slow at rendering large box shadows. I had a situation where a complex layout with fixed elements and large shadows slowed Firefox down to 2 frames/second for scrolling and DOM manipulation.
Some advice:
- Be aware that by introducing fixed elements (e.g. sticky navigation bars) and large animations, you might force the browser to redraw large portions of the site when scrolling. When your fixed elements have shadows, this increases the screen area that needs to be redrawn, which might again require other elements to be redrawn, and so on.
- Test your site with Firefox and check if scrolling is still smooth.
- When your site is slow in Firefox, look for huge shadows in your CSS (e.g. a radius of 200 pixels).
Also see
Once an application no longer requires constant development, it needs periodic maintenance for stable and secure operation. makandra offers monthly maintenance contracts that let you focus on your business while we make sure the lights stay on.
