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

NEW
Unassigned

Status

()

Core
Graphics
3 years ago
3 years ago

People

(Reporter: Julian Viereck, Unassigned)

Tracking

(Blocks: 1 bug)

Trunk
x86
Mac OS X
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [gfx-noted])

(Reporter)

Description

3 years ago
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...

Updated

3 years ago
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

Updated

3 years ago
Whiteboard: [gfx-noted]
You need to log in before you can comment on or make changes to this bug.