The frame rate of the following page drops significantly when scrolling. > <html> > <head> > <style> > body { > background: url(background.jpg) fixed, #eee; > height: 10000px; /* to make the page scrollable. */ > } > .boxes { > border: 1px solid #000; > height: 200px; > width: 200px; > filter: drop-shadow(0 50px 50px #ddd); > } > </style> > </head> > <body> > <div class="boxes"></div> > <div class="boxes"></div> > <div class="boxes"></div> > </body> > </html> Two possible workarounds are either remove the filter from the boxes class or remove the second background from the body. The web inspector shows that it takes WebKit a long time on compositing and painting. The same page tested under Firefox 56.0b1 rendered with no problem when scrolling.
Created attachment 317868 [details] Testcase
will-change:filter on the boxes will fix this, but we should avoid repainting the body when scrolling in this case.
Importing bug for tracking.
<rdar://problem/97094174>