Bug 175423

Summary:

Scroll performance is impacted when having a fixed background followed by other backgrounds.

Product:

WebKit

Reporter:

Kaede Hoshikawa <futursolo>

Component:

CSS

Assignee:

Nobody <webkit-unassigned>

Status:

NEW

Severity:

Normal

CC:

bfulgham, futursolo, simon.fraser, webkit-bug-importer

Priority:

Keywords:

InRadar

Version:

WebKit Nightly Build

Hardware:

Unspecified

OS:

Unspecified

Attachments:

Description	Flags
Testcase	none

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.