Chrome 54 breaks animation (works on 53)

[larsgk]

Description

The tiles (dot to square) demo doesn't render the orange/square parts and doesn animate on: EDGE 20.10240.16384.0 Chrome 54 (windows)

Works fine with: Chrome 53 (linux) IE11 FF 49.01 (windows)

Note, there is a stackoverflow question related to this (webanimation breaking?): http://stackoverflow.com/questions/40214324/polymer-override-script-loaded-by-html-import

Expected outcome

Animation happening

Actual outcome

The clicked blue dot just hides

Live Demo

http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/tiles/index.html

Steps to reproduce

1. Open in browser (listed above)
2. Enjoy or facepalm depending on the chosen browser

Browsers Affected

• [X ] Chrome 54
• [ ] Firefox
• [ ] Safari 9
• [ ] Safari 8
• [ ] Safari 7
• [X ] Edge
• [ ] IE 11
• [ ] IE 10

(didn't test on safari, older IE and older FF)

[sravan-s]

I might have a related issue,

Uncaught TypeError: Failed to execute 'animate' on 'Element': 'function (a){return a}' is not a valid value for easing

Could also be related to

• https://github.com/flauc/angular2-notifications/issues/51
• https://github.com/David-Mulder/paper-color-picker/issues/36

I have also noticed that, a lot of similar issues are being reported at various other repos.

[togonow]

I have a similar issue when a paper-input gets focus and an animated line on the baseline of the input field starts animating. Any div or element below the input field flickers to the top left corner of the page then revert back once the paper-input animation ends to the original position.

Note: The input field and div are within / and the flicker behavior only happens when at least one page animations occurs. I've tested on chrome 52 works ok, but breaks on chrome 54

[togonow]

Here is a snapshot when moving the focus into the password input field

[sravan-s]

The issue got sorted out when I updated the neon-animations version to 1.2.4

[togonow]

I'm still facing the same issue even after updating neon-animations to 1.2.4

{ "name": "to-go-now", "private": true, "dependencies": { "accounting.js": "", "gold-elements": "PolymerElements/gold-elements", "google-map": "GoogleWebComponents/google-map", "iron-elements": "PolymerElements/iron-elements", "iron-meta": "PolymerElements/iron-meta", "lodash": "", "moment": "", "neon-elements": "PolymerElements/neon-elements", "page": "visionmedia/page.js", "paper-badge": "PolymerElements/paper-badge", "paper-card": "PolymerElements/paper-card", "paper-elements": "PolymerElements/paper-elements", "platinum-elements": "PolymerElements/platinum-elements", "polymer": "polymer/polymer", "neon-animation": "PolymerElements/neon-animation#1.2.4" }, "devDependencies": { "web-component-tester": "*", "test-fixture": "PolymerElements/test-fixture#1.1.0" }, "resolution" : { "neon-animation": "PolymerElements/neon-animation#1.2.4" } }

However, i'm noticing bower neon-animation extra-resolution Unnecessary resolution: neon-animation#PolymerElements/neon-animation#1.2.4 on bower install

note, i'm deleted the bower_components folder and rebuilt it from scratch

[togonow]

I ended up reverting to iron-pages instead of neon-animated-pages and that resolved my issue but i lost animation between pages

[atishpatel]

I'm facing the same issue as togonow. My paper-input, paper-checkbox, and paper-slider all jump up and then back to original position when one of them is focused or unfocused. The weird part is i have 4 neon-animatable pages and 2 of them have paper-inputs. It works fine on page1 but on page2, the input fields just jump around. I tried switching the entry and exit animation for the page1 and page2 but it didn't make a difference. I removed the entry-animation from just page2 and it stopped jumping around now. O_o? I think it might have to do with the transform being reapplied to the input elements?

@togonow As mentioned above, my workaround is disabling the entry animation for just the page with the issue.

[Tanbouz]

I tried the demo you linked on Chrome 54 and it appears to have the same issue you described.

However, the same demo hosted here under "Tiles" works fine.

You could take a look at the source and see what differs!