Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Chrome 54 breaks animation (works on 53) #210

Open
6 tasks
larsgk opened this issue Oct 24, 2016 · 8 comments
Open
6 tasks

Chrome 54 breaks animation (works on 53) #210

larsgk opened this issue Oct 24, 2016 · 8 comments

Comments

@larsgk
Copy link

larsgk commented Oct 24, 2016

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
Copy link

sravan-s commented Nov 2, 2016

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

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

sravan-s pushed a commit to arunsoman/polymer-d3 that referenced this issue Nov 2, 2016
@togonow
Copy link

togonow commented Nov 5, 2016

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
Copy link

togonow commented Nov 5, 2016

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

screen shot 2016-11-04 at 5 45 09 pm
screen shot 2016-11-04 at 5 45 00 pm

@sravan-s
Copy link

sravan-s commented Nov 5, 2016

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

@togonow
Copy link

togonow commented Nov 5, 2016

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
Copy link

togonow commented Nov 5, 2016

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

@atishpatel
Copy link

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
Copy link

Tanbouz commented Nov 19, 2016

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants