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

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

• javascript
• angularjs
• safari
• material-design
• angular-material

• 2 Same here - I am seeing issues in Safari that are not even present in IE, let alone FF or Chrome. Prominently, we are having lots of cases of md-content collapsing (height: 0) for apparently no good reason at all, pletely hiding whole layout sections etc. – csvan Commented Sep 27, 2015 at 19:21
• it seems that it's the layout-fill attribute specifically. The height:100% is what causes the collapsing issues in Safari. – daniel0mullins Commented Nov 9, 2015 at 15:37
• This case issue: github./angular/material/issues/1720 seemed to help me a lot with the layout for safari – Austin Perez Commented Jan 29, 2016 at 0:23
• Have you upgraded to the latest release of Angular Material? I'm using 1.0.4 and not seeing these issues. – Mike Feltman Commented Feb 17, 2016 at 18:24
• 2 It's hard to answer your question if you don't have a specific issue. I've been able to produce multiple angular material applications that work consistently across multiple devices and browsers. For example for @alicona 's issue I used layout-column on the parent and then the child would be a layout-row layout-wrap and that worked pretty well. For md-content not being a scrollable area or collapsing you may have to wrap an md-content inside another md-content... – David Meza Commented Apr 22, 2016 at 18:23

2 Answers 2

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+.

I am using angular material https://material.angular.io in package.json version is "@angular/material": "2.0.0-beta.12" and its work fine in crome browser but style/layout/font are break in safari browser V 5.1.7(7534.57.2). here is screenshots of some sample control