Offscreen Nav response delay + repaint after close bug

[wonglok]

Hi~

I found the offscreen nav's left overlay effect has some bug.

http://youtu.be/1LlOyy2gc9A

There are a few points from the video.

1. Response delay bug. (200~300 ms delay is very sensible to touch screen users)
2. Repaint after each close action.

P.S.
Please ignore the skewed/inaccurate frame rate data in my video.
It is affected by quicktime screen recording.
Without it, the frame rate was about 60fps.

---

Suggestion:

Google IO 2013 Jank Bust - 18m35s
no layout, no repaint offscreen nav

http://youtu.be/n8ep4leoN9A?t=18m35s

[wellingguzman]

Thanks, I'm going to take a look at this right now.

[wonglok]

Thanks :)

[wonglok]

I tried something inside canary.
0. Click the left overlay button.

1. Open chrome dev tools.
2. inspect the nav element

$0.classList.remove('effeckt-show'); $0.classList.add('effeckt-hide');

$0.classList.remove('effeckt-hide'); $0.classList.add('effeckt-show');

---

Result of new behaviour:
seemed a little better

get rid of unnecessary movement (200300ms delay)

~but still has a tiny-little bit repaint. on the left.

[wellingguzman]

This is because the "effeckt" class is removed at last, so that why is a repaint there.
We shouldn't be worried about this too much right now.

[wonglok]

Oh, I see :)

[wonglok]

@wellingguzman
Previously, I guess the Javascript is for demo page only and It's not the CSS bug so I did not file a new PR.

~ I just found out that some of the JS add/remove class behaviour of offscreen nav can actually be improved for performance. _(I may file a new PR later.)_ :)

The offscreen nav is supposed to be promoted to composite layer during page init/config phase instead of the moment you click the menu open button, which causes some 100~200ms delay caused by promotion of offscreen layer to composited layer, and the transition ms reason.

The close button should not cause layer demote of the off-screen nav.

Suggested Fix:
phase1 ~ setup the offscreen nav

• add class that promote layer of offscreen nav

phase2 ~ on click - open menu button

• removeClass(hideMenu) addClass (open menu)

phase 3 ~ on click - close menu button / area

• removeClass(openMenu) addClass(hideMenu)

phase 4~ un-setup offscreen nav (usually unecessary, but see the reason below )

• remove the class that promote layer of offscreen nav

usage:
for deleting that offscreen nav.
$destroy in angular.
and :close() in backbone.
may be required in polymer.

[wonglok]

P.S. JS should be complementary not the main thing. I just want to fix the perf bug.