Closed Bug 1128342 Opened 9 years ago Closed 5 years ago

Scrolling on http://2015.jsconf.eu/ is not smooth

Categories

(Core :: Graphics, defect)

x86
macOS
defect
Not set
normal

Tracking

()

RESOLVED WORKSFORME

People

(Reporter: julian.viereck, Unassigned)

References

Details

(Whiteboard: [gfx-noted])

Using the latest Nightly build and Firefox 35 release channel, there is a drop in the frame rate from 73 to temporary 5 frames on my MacBook 15" when scrolling down the page on http://2015.jsconf.eu/. (I measured the frame rate using the DevTools profiler.) Scrolling the same page on Google Chrome yields smooth scrolling behavior. As the results show up on Firefox 35 as well, I guess this is not related to e10s.
Platform performance profile:
http://people.mozilla.org/~bgirard/cleopatra_staging/#report=496b8c07f65516ce0ddaa8fdfefec6efe5ccc716&filter=[{"type"%3A"RangeSampleFilter","start"%3A976,"end"%3A1811}]&selection=0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,234,235,236,237,238,239,240,241,242,243,116,117,133,134,135,136,137,138,139,140,339,808,809,810,810,811,1106,1107,1108,1110,170,171,1408,173,696,186,187,188,697,698,699,700,701,702,703,1112,704,705,706

I'd guess we're making a large layer tree mutation during the scroll will cause us to rebuild a large layer container a gradient.

Ideally better gradient performance would help but better layer heuristics would help too.

The page could simplify the gradient if you know the author.
CSS line responsible for the slow down:

background-image:linear-gradient(to left, rgba(0,0,0,0),rgba(0,0,0,0) calc((.75 * 1280px) + ((100% - 1280px)/2)),#e10079 calc((.75 * 1280px) + ((100% - 1280px)/2)),#e10079 100%)

This is a linear-gradient so I'm not sure why it's that slow to paint. Jeff?
Flags: needinfo?(jmuizelaar)
Maybe there's a colorspace mismatch. The CoreGraphics symbols in the profile don't make a lot of sense...
Flags: needinfo?(jmuizelaar)
Yeah, the CoreGraphics symbols in that profile look wrong. I get something saner from Instruments.

Anyways, perhaps Chrome is hiding the problem better with async scrolling? The page is sort of dumb for using a linear gradient to get a solid color bar... but I guess it's easy to allow the size of the gradient to change then...
Blocks: 882383
bug 913443 would get us to avoid the paint when making the transition which is another way to make this fast.
Blocks: 913443
Whiteboard: [gfx-noted]
No longer blocks: 913443
This is pretty smooth now with APZ and all.
Status: NEW → RESOLVED
Closed: 5 years ago
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.