Flickering when using neon-animated-pages with Polymer

Question

I searched for this the solution a lot but I couldn't find any post describing the same "flickering" problem.

You can see a GIF here

Situation
I have a website with a menu, using app-route as in Polymer Starterkit but enhanced with neon-animated-pages. If you use the menu (Start, My Card, My Dashboard) there is a smooth transition.

Problem
Go to "My Card" and click the enhance card arrow down (tooltip "more info") at the first card. Now use the menus again and the page transitions are now flickering, as soon as the animation finished. It is like all object are quickly moving somewhere and then back to the position where they should be.

What I have tried
I tried to change CSS, as it seems to "re-align" the objects on the page. Also I had this problem before when I used javascript to route to another page, but using "a href..." for app-route (as in polymer starterkit), this problem disappeared again.

Anyone have any idea what this can be?

I checked with Chrome, Firefox and IE, seems to be the same everywhere.

Thanks very much for your help! Kind regards, Huebiii

Answer 1

Found two more sources on github with the same issue and solutions.

1. Apparently only slide left/right animation are affected. Using a different animation should help.
2. Set Element.prototype.animate = null before loading the polyfill.

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

web-animations-next-lite flicker #86