Box shadow scrolling lag in Chrome
I'm using on the side of my web and sides of the container div the box shadow property and Chrome gives me a terrible lag when performing scroll.
I've been researching and reporting take the issue since 2011 without success, Chrome still has not solved the problem.
I wonder if there are currently any solution to solve this problem.
In Explorer 10, 11 and Edge will perfect the web. In Mozilla and Opera too. The drop in fps on scrolling occurs only in Chrome.
Here they give a possible solution but it does not seem very smart:
The solution is to add a transparent png border to the div.
Is there any other solution today? Thank you
If a lag occurs during scrolling there are only three options.
- Remove the affected box-shadow completely
- Change the box-shadow and try again or make it less complex (that worked for me). In my case i stacked two inset shadows, top and bottom, after removing the bottom one the issue is finally gone or at least unnoticable
- Use the border image solution you linked
I hope this issue gets soon fixed. Only Chrome for Android seems to be affected in my case. But Firefox had also serious problems with box-shadows in the past. Some combinations and values resulted in strange performance issues. However they seem to be fixed now ;).