CODEWITHSUNDEEP
angularanimationsafariangular-material
raouaoul
raouaoul

Reputation: 881

Angular adds style animations to DOM on Safari browser

I've built an application in Angular 7 using Angular Material framework. Everything looks good in Chrome, but now I want to enable access with Safari and to my surprise a lot of elements are looking very odd. Below is a picture of some icons for example. The same happens with inputs and buttons. (seems to be some kind of focus-overlay).

icons

After a while I figured out that it has something to do with animations. Because on Safari I see these weird style="animation" attributes added. When I remove them in developer tools, everything is looking good again. Now, I have no idea how these animations got there and can't find any related issue while googling. I have enabled most of the default stuff from polyfills.ts file.

How can I fix this issue? When I look at the Angular Material documentation on Safari, everything looks fine there.

This is how my DOM looks in Safari:

code

Upvotes: 1

Views: 216

Answers (1)

Job
Job

Reputation: 485

Safari seems to frequently have issues with Angular Material judging by a quick google search.

There seem to be a few packages that allow you to partially disable animations like this one. Which makes use of the NoopAnimationsModule.

Upvotes: 1

Related Questions