Angular Material and the Safari Browser

Question

I noticed that Safari doesn't work well with Angular Material. It looks like compatibility issues are everywhere: styles, layout, etc. Has anyone else faced those issues and have good advice on how to workaround those things nicely?

Answer 1

At the time of the question, there were indeed problems with Angular Material in Safari:

• layout (mostly flex-related issues)
• dialogs (positions calculated wrongly / dialogs collapsed)
• performance (some of the fancy animations, including ripple, scale from click coords, etc)

You were using Angular Material at version < v0.10.1, which in fact had a lot of problems in general. However, nowadays (and in fact after Angular Material v1.x), those problems are gone (not only in Safari).

Angular Material became more stable and more performant (proof of this are the 7000+ closed issues). Flexbox is also better supported nowadays, which was the cause of many layout issues for versions < 1.x.

For anybody finding the question today that is running Angular Material < v1.x, the answer is simple: upgrade Angular Material to a newer version, preferably v1.1+.