Currently we extract the current page and the next page when starting a pan. This takes a large amount of time and causes us to miss frames. By using TransformZ(1px) we can force layout (until there's a better way) to assign active layers to elements. For the main page and homescreen pages that are within 32pixels away they will be pre-rendered allowing smoother animation. Here's a messy initial WIP that does this. Note that there's still some more invalidating happening even with this page that will be need to be fixed as a follow-up.

While this will be great to have, it's out of scope for 1.2 so I'm moving to 1.3.

Refer to comment in 930587 https://bugzilla.mozilla.org/show_bug.cgi?id=930587#c10

There are several tricks to prerendering adjacent layer in gaia side. The change we need to do in home screen side is cheap. By make adjacent pages intersect with view port, we can keep both layers active and content be prerender. Jerry, please update the patch. Side effect is, since we need to keep three layers, memory footprint of home screen increase. But I think that what we need to pay for smooth scrolling.

We modify the homescreen page's position. Each page will overlap "1 css pixel." We enable the "Flash repainted area" option in Settings. When we move to adjacent page, we can find out that the color of adjacent page doesn't change. It implies that the adjacent page doesn't repaint, but the cost of css style still occur. The gaia code is at: https://github.com/cctuan/gaia/tree/customize_overlap

(In reply to Jerry Shih[:jerry] from comment #4) > The gaia code is at: > https://github.com/cctuan/gaia/tree/customize_overlap This change can overall improve page swiping performance on all devices. Since two more layers cache in the memory, home screen need more memory: 2 (two pages) * screen_width * screen_height * 4(RGBA) For example, on VGA device, 2 * 640 * 480 * 4 ~= 2.4MB

There are four major changes on my local branch customize_overlap, 1. visibility is always visible. -> before, we only set pages visible when touchmove (css change) 2. transform: translateZ(1px). (minor JS + CSS change) 3. move three pages together when touchmove. -> before, we only move two page in the same time. (JS change) 4. next and previous page are always 1 css px overlap with current page. (JS change) Since my local patch is about 1 week ago (just saw some changes on master already happen when switching pages), I will try to uplift my change onto it and see.

(In reply to C.J. Ku[:CJKu] from comment #5) > (In reply to Jerry Shih[:jerry] from comment #4) > > The gaia code is at: > > https://github.com/cctuan/gaia/tree/customize_overlap > This change can overall improve page swiping performance on all devices. > Since two more layers cache in the memory, home screen need more memory: > 2 (two pages) * screen_width * screen_height * 4(RGBA) > > For example, on VGA device, > 2 * 640 * 480 * 4 ~= 2.4MB Since we are using double buffer for each page. The total memory should be 2 (two pages) * 2 (doublebuffer) * 640 * 480 * 4 ~= 4.68 MB For 720p resolution, we need 2 * 2 * 720 * 1280 * 4 = 14 MB

(In reply to Benoit Girard (:BenWa) from comment #0) > assign active layers to elements. For the main page and homescreen pages > that are within 32pixels away they will be pre-rendered allowing smoother > animation. Update the status. Currently, we haven't achieved the "pre-rendering." We just preserve the page we have rendered. This is the gaia part change list. 1. page's visibility is always visible. 2. all page has transform: translateZ(1px). 3. next and previous page are always 1 css px overlap with current page. And I applied BenWa's patch. (bug 931082 attachment 822424 [details] [diff] [review]). When we move from page 1 to page 2, page 2 will be rendered. Then, we go to page 1 and go back page 2 again, there is no buffer allocation and rendering task for page 1 and 2. "For the main page and homescreen pages that are within 32pixels away they will be pre-rendered allowing smoother animation." roc, do you know where is the 32pixel condition in gecko? I will investigate the pre-rendering issue.

(In reply to Jerry Shih[:jerry] from comment #8) > This is the gaia part change list. > 1. page's visibility is always visible. > 2. all page has transform: translateZ(1px). > 3. next and previous page are always 1 css px overlap with current page. The test gaia code: https://github.com/JerryShih/gaia/tree/931262

See nsDisplayListBuilder::MarkOutOfFlowFrameForDisplay where we call overflowRect.Inflate(nsPresContext::CSSPixelsToAppUnits(32)). Thanks!!!

Adding bug 940842 as a very weak depends of this. i.e. It would be nicer to use this but we shouldn't wait for it at all.

as this is a sub-set of #920921 performance issue, let's still target to fix/improve it in graphic workweek. change it to 1.4+ for now.

FxOS Perf P1 as this has a direct negative impact on Frame Uniformity.

This doesn't fall under the QC blocking feature list & DSDS feature list. Renoming.

Comment on attachment 822613 [details] [diff] [review] messy WIP We've moved to using will-change. This patch is no longer needed.

I'm making this as resolved before we are keeping the homescreen as active layers now with will-change. Thanks for the help Mason!