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.

Scroll Lag with CSS3 box-shadow property?

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:

Scroll Lag with CSS3 box-shadow property?

The solution is to add a transparent png border to the div.

Is there any other solution today? Thank you

Answers


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 ;).


Need Your Help

Sql Injection with jsonobject and listview from an online database

android android-intent

A quick description of the application that i want to make.

What guidelines are appropriate for determining when to implement a class member as a property versus a method?

c# .net

The .NET coding standards PDF from SubMain that have started showing up in the "Sponsored By" area seems to indicate that properties are only appropriate for logical data members (see pages 34-35 o...