Need to import neon-animation/web-animations.html not mentioned anywhere

[akc42]

I am just converting all my elements to Polymer2.0 So I have paper-tooltip#2.0.0 installed in my bower_components.

When running in Chrome(58) I get warnings on the console

neon-animation-runner-behavior.html:40 Couldnt play ( fade-in-animation ). ReferenceError: KeyframeEffect is not defined
    at HTMLElement.configure (fade-in-animation.html:39)
    at HTMLElement._configureAnimations (neon-animation-runner-behavior.html:33)
    at HTMLElement.playAnimation (neon-animation-runner-behavior.html:93)
    at HTMLElement.show (paper-tooltip.html:275)
    at HTMLElement.handler (template-stamp.html:92)

neon-animation-runner-behavior.html:40 Couldnt play ( fade-out-animation ). ReferenceError: KeyframeEffect is not defined
    at HTMLElement.configure (fade-out-animation.html:39)
    at HTMLElement._configureAnimations (neon-animation-runner-behavior.html:33)
    at HTMLElement.playAnimation (neon-animation-runner-behavior.html:93)
    at HTMLElement.hide (paper-tooltip.html:295)
    at HTMLElement.handler (template-stamp.html:92)

As I hover over and then move away from my tooltip elements. The tooltip does not display

Digging around in the code of paper-tooltip.html there is a comment near the top of the file that says

Note that as of `paper-tooltip#2.0.0`,
you must explicitely include the `web-animations` polyfill if you want this
element to work on browsers not implementing the WebAnimations spec.

and then an example references <link rel="import" href="../../neon-animation/web-animations.html">

Including that html import in my application (suitable adjusted to ensure it gets the correct file from context of my application) makes the warnings stop and allows the tooltips to work.

Firstly, I assume that Chrome 58 natively supports WebAnimations for a while and therefore should not need the Polyfill, and secondly if something needs to be imported why not import it in the paper-tooltip.hml file itself? and lastly, its not mentioned in the readme, nor in the entry in WebComponents.org.

[RoXuS]

👍

[notwaldorf]

Including a polyfill with an element is an anti-pattern: if your element is only used in Chrome, for example, you'll still pay the cost of the polyfill, even though you never need to use it. As a result, the correct pattern is to expect the user of an element to be responsible for including the polyfill. On Wed, May 24, 2017 at 7:55 AM Rousseau Julien notifications@github.com wrote:

👍

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/PolymerElements/paper-tooltip/issues/109#issuecomment-303749772, or mute the thread https://github.com/notifications/unsubscribe-auth/ABTkUquSTbz_w3_8htLnReZZJAJEuUBlks5r9ET4gaJpZM4NlARy .

[akc42]

@notwaldorf I agree that it shouldn't be included if not needed BUT, the point is I am using chrome and I still needed the polyfill for it to work! So something is wrong somewhere.

[e111077]

~Looks like we need to manually define fade-in-animation~ It seems as if KeyframeEffect is not a thing in Chrome anymore. Investigating...

[e111077]

@akc42, It seems as if for some reason still unbeknownst to us, the window.KeyframeEffect class is not defined natively in Chrome stable (perhaps it hasn't been released or there was a bug where it was removed). Though, I can confirm that it is in Chrome Canary. So unfortunately, for now, you have to use the polyfill for the animations because this feature is not in Chrome stable (Chrome 58).

[builtbyproxy]

If this doesn't help anyone try checking out this issue https://github.com/alchaplinsky/polymer-elements-rails/issues/1

[sarathcs]

Faced the same issue while using the paper-dropdown-menu, which requires the same web-animations.html mentioned above and this in turn depends on . So, if "web-animations-js" is not installed on you machine, you may run into this error. And running a bower install on "web-animations-js" gets this explicitly and resolves the issue of KeyframeEffect undefined.

[punkratz312]

Faced the same issue while using the paper-dropdown-menu, which requires the same web-animations.html mentioned above and this in turn depends on . So, if "web-animations-js" is not installed on you machine, you may run into this error. And running a bower install on "web-animations-js" gets this explicitly and resolves the issue of KeyframeEffect undefined.

plz notice it does not work to import the web-animations-js as an js import. It needs 2 be done in an html file right after webcomponents-loader.