Flicker after slide animation in neon-animated-pages in Chrome 53

[shawncplus]

Description

With a nested paper-header-panel with the innermost having a neon-animated-pages container with a number of pages with toolbars and entryAnimation/exitAnimation as slide-from-right/slide-left, with the outer paper-header-panel also containing a toolbar and a "Next" button calling the neon-animated-pages.select() the innermost toolbar/content shifts upward at the end of the animation only after focusing child content of the outermost paper-header-panel

Expected outcome

Pages animate smoothly

Actual outcome

Pages shift upward (below the outermost paper-toolbar) at the end of the animation

Gif: http://gfycat.com/GoodNeatBlobfish

Live Demo

https://output.jsbin.com/denafe/1

Steps to reproduce

Don't click anywhere before clicking the -> button

1. Press -> button in top right
2. Pages animate smoothly
3. Click anywhere but the top toolbar
4. Press the next button
5. Pages will flicker heavily (it is noticable) at the end of the slide animations

Browsers Affected

• Chrome 53 (Tested with 53.0.2785.92 and 53.0.2785.101) on Ubuntu 14.04
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

This does not affect Firefox/Safari or Chrome <= 52

[shawncplus]

There's some property of this bug that is intermittent, it's been happening consistently since my update from 52 -> 53 last week. Reproduced it about 15 times before submitting this bug, as soon as I hit submit I switched back to the tab and it stopped happening so... yeah possible CNR

[david-schofield]

I am experiencing the exact same issue in my application on Chrome v53 on OSX (mac). The flicker isn't visible in chrome v55 (canary) however bugs appear in the content of the animated pages.

[e111077]

@shawncplus This is odd, your jsbin does not seem to repro it on Mac v53.0.2785.113.

@schofld what version of chrome are you using?

[jonboj]

Could not reproduced with the jsbin example. Ubuntu 16.04,
------ Update-----

Chrome Version 53.0.2785.113 (64-bit).
Gave it an extra try. Maybe not clicking at the right location the first time. Now the bug is reproduced! Consistently strong flicker.

---

Firefox 48.0. The example isn't shown correct.

---

Opera 40.0.2308.44 Couldn't reproduce, works fine.

---

Seems like on Ubuntu linux a Chrome only bug.

[david-schofield]

I agree I am no longer able to reproduce the issue in https://output.jsbin.com/denafe/1 now that Chrome Version 53.0.2785.116 (64-bit) has come out for mac (running osx 10.11.6)
However I have still got the issue in my app. There is a flicker of the content of <neon-animatable> with 'slide-from-right-animation' on entry when the animation is finished and the components/elements are repositioned and don't return to where they are supposed to be. When inspecting the elements that are rendered incorrectly they are computed correctly according to Chrome.
There is no issue in any other browser. Chrome has this issue consistently every time (even the latest version of Canary)
I hope you have some ideas already :) Though I guess I will have to try to create a demo over the weekend.

[shawncplus]

Can still reproduce 53.0.2785.113 (Official Build) (64-bit) Revision 67422c8fead813c7b6cbc44cfef10f3d49758d75-refs/branch-heads/2785@{#877}

As mentioned there is something about this bug that is intermittent but have no idea what it is. The best I can guess is some caching somewhere deep inside the compositioning stuff but who knows

[e111077]

Finally able to reproduce it on my own! I'll take a look into it

[dwalters18]

I've only encountered this when using entry-animation="slide-from-right-animation" and entry-animation="slide-from-left-animation". Interestingly enough, the others seem to function without issue.

[e111077]

Chrome issue; follow here:
https://bugs.chromium.org/p/chromium/issues/detail?id=649195#

Also from web-animations/web-animations-js#86

BTW a workaround that doesn't involve using the dev polyfill would be to set Element.prototype.animate = null before you load the polyfill. This might save you having to mess with bower configs and restrict the workaround to the affected page.