NEW 175423
Scroll performance is impacted when having a fixed background followed by other backgrounds. 
https://bugs.webkit.org/show_bug.cgi?id=175423
Summary Scroll performance is impacted when having a fixed background followed by oth...
Kaede Hoshikawa
Reported 2017-08-10 03:18:59 PDT
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.
Attachments
Testcase (468 bytes, text/html)
2017-08-10 16:09 PDT, Simon Fraser (smfr) 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Simon Fraser (smfr)
Comment 1 2017-08-10 16:09:21 PDT
Created attachment 317868 [details] Testcase
Simon Fraser (smfr)
Comment 2 2017-08-10 16:09:43 PDT
will-change:filter on the boxes will fix this, but we should avoid repainting the body when scrolling in this case.
Brent Fulgham
Comment 3 2022-07-15 14:22:24 PDT
Importing bug for tracking.
Radar WebKit Bug Importer
Comment 4 2022-07-15 14:22:35 PDT
<rdar://problem/97094174>
Note You need to log in before you can comment on or make changes to this bug.