使用带有 Polymer 的霓虹灯动画页面时闪烁

Flickering when using neon-animated-pages with Polymer

我搜索了很多这个解决方案,但找不到任何 post 描述相同的 "flickering" 问题。

您可以看到一个 GIF here

情况
我有一个带有菜单的网站,在 Polymer Starterkit 中使用 app-route,但使用霓虹灯动画页面进行了增强。 如果您使用菜单(“开始”、“我的卡片”、“我的仪表板”),则过渡平稳。

问题
转到 "My Card" 并单击第一张卡片上的向下增强卡片箭头(工具提示 "more info")。 现在再次使用菜单,页面转换现在开始闪烁,动画一结束。就像所有的物体都在快速移动到某个地方,然后又回到它们应该在的位置。

我试过的
我试图更改 CSS,因为它似乎 "re-align" 页面上的对象。 我之前也有这个问题,当我使用 javascript 路由到另一个页面时,但是使用 "a href..." 作为应用程序路由(如在 polymer starterkit 中),这个问题又消失了。

有人知道这是什么吗?

我查了下Chrome,火狐和IE,好像到处都一样。

非常感谢您的帮助! 亲切的问候, 笔笔

在 github 上找到了两个具有相同问题和解决方案的来源。

  1. 显然只有幻灯片 left/right 动画受到影响。使用不同的动画应该会有帮助。
  2. 在加载 polyfill 之前设置 Element.prototype.animate = null

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

web-animations-next-lite flicker #86