IgxRipple - animate() function not supported in Safari

[ig-robstoffers]

Description

The IgxRipple directive uses the experimental animate() function which is not currently supported by Safari, displaying an error in the console. It doesn't seem to have any ill effects but I wanted to make you aware as I didn't see an existing issue for this.

• igniteui-angular version: 6.2.4
• browser: Safari 12.0.2 (14606.3.4)

Steps to reproduce

1. Run attached sample in Safari browser
2. Right click & Inspect Element to open dev tools
3. Click on Tab 2

Result

Expected result

No error is displayed and the ripple effect plays on the tab when clicked.

Attachments

tabs-animate.zip

[damyanpetev]

@ig-robstoffers There's a slightly obscure note at the bottom of the Ripple Usage section that explains the directive uses Web Animations API and that may require a polyfil for some browsers.

As you already have the package installed in your sample, all that is needed would be to uncomment this line in polyfills.ts:

igniteui-angular/src/polyfills.ts

Lines 53 to 57 in e7e31ae

	* Web Animations `@angular/platform-browser/animations`
	* Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
	* Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
	**/
	import 'web-animations-js'; // Run `npm install --save web-animations-js`.

This applies for multiple controls that rely on the AnimationBuilder but those seem to work somehow with a warning to install the poly (built-in CSS Keyframes fallback).

@simeonoff Maybe the polyfil requirement should be more prominent on top (like the Calendar one perhaps)?

Could also add a little check before calling .animate() or go through Angular's API to avoid the error if the poly is missing.

[ig-robstoffers]

Ah I see. Adding that to my polyfill.ts definitely fixed that. Thanks @damyanpetev !

[zdrawku]

Documentation issue has been created, closing this one.

[simeonoff]

@rkaraivanov Can we make the change to the Web Animations builder to amend the issues?