Material: layout: flex-wrap broken on safari since v1.1.2

[FlorianBurgevin]

Actual Behavior:

• What is the issue? *
  

• What is the expected behavior?
  

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue: Ref to material website
• Details:
  Hello, I seems the flex-wrap layout is not working anymore in safari since the 1.1.2 version.
  It's visible above with two screenshots on safari first and on chrome then.

Angular Versions: *

• Angular Version: 1.5.8
• Angular Material Version: 1.1.2

Additional Information:

• Browser Type: * Safari
• Browser Version: * 10.0.3 (12602.4.8)
• OS: * Mac
• Stack Traces:

[epelc]

Looks like the flex attribute's percent part isn't being set correctly.

1.1.1(working)

1.1.3(broken)

All of the flex-[number] styles were changed from

flex: 1 1 [number]%;

to

flex: 1 1 100%;

[epelc]

@ThomasBurleson Looks like the fix for flex offset(pr https://github.com/angular/material/pull/9572) broke this. Is there a way to fix both?

See the changes in layout.scss
https://github.com/angular/material/pull/9572/files#diff-cd89844cbb4bd719d867bb0d67064ba1R133

[epelc]

I just found out this was already discovered/known https://github.com/angular/material/issues/5345#issuecomment-267838710.

Kind of wish layout-wrap was given priority over flex-offset but I guess it's better to just wait for a webkit to update.

[lephuongbg]

Unless angular/flex-layout supports Angular 1/Angular Material 1 (which is difficult/impossible if I'm correct), this bug prevents our website to upgrade (both Angular Material and Angular as old version doesn't support angular 1.6) to get other fixes.

P/S: I'm assuming "Layouts V2" that we've already mentioned several times is angular/flex-layout. Please clarify if it is different and whether it supports Angular Material 1 or not. Thanks.

[ThomasBurleson]

@herophuong - @angular/flex-layout is compatible with Angular 2.3.5 or higher.

As such it is not compatible with Angular 1.x nor with Angular Material 1.x.

[mgol]

FWIW, it works fine in WebKit Nightly r213509 so it must be Material not accounting for a Safari issue that's only fixed in Nightly so far.

[mgol]

FWIW this is no longer an issue in Safari 11.0 & newer. Whether there's anything to fix here or not depends on the resolution of issue #9396.

[Splaktar]

Well, the last 2 years worth of Safari can be grouped up as 11.0-11.2 (released 9/18/17) and 11.3 (released 3/28/18).

But is iOS 10 support something that is critical to users? There hasn't been a lot of activity on this issue in the last year and a half.

If this issue is still affecting you or your users, please respond with details about the iOS versions that your users are actively using.

[mgol]

It's one year, not two, and not even a full year. :) Safari gets a major version bump each year, version 12 will be released around September 2018. The same applies to iOS major versions as they match Safari major versions.

[Splaktar]

Sorry, I was just trying to indicate calendar years, not an actual period of time. I realize that September to March isn't 2 years.

We'll need to decide which versions of iOS Safari to support in https://github.com/angular/material/issues/9396. Previously we have claimed support for n-1, which currently could be interpreted as iOS 10 and 11, but in September it would be 11 and 12. We currently claim that we'll support any browser that has decent Flexbox support. I think that we'll need to narrow this a bit more going forward, as part of #9396.

For reference, here is the Safari bug which doesn't list a version fixed other than "WebKit Nightly Build": https://bugs.webkit.org/show_bug.cgi?id=136041

In https://github.com/angular/material/issues/10345#issuecomment-276969209, @epelc asked if there was a way to fix both the wrap and offset cases, it doesn't appear that anyone has come up with an idea for doing that yet.

[mgol]

Sorry, I was just trying to indicate calendar years, not an actual period of time. I realize that September to March isn't 2 years.

Ah, sorry, I didn't understand.

We'll need to decide which versions of iOS Safari to support in #9396. Previously we have claimed support for n-1, which currently I guess would be iOS 10 and 11, but in September it would be 11 and 12.

This is tricky in a way as while in most browsers only major versions get non-trivial engine updates Safari is different - it bumps a major once a year but engine is getting a meaningful update twice a year. That's why Browserslist (and, hence, Autoprefixer) reports only:

safari 11.1
safari 11

for the query "last 2 Safari versions". To get all Safari 10.0+ versions you'd need to specify "last 4 Safari versions":

safari 11.1
safari 11
safari 10.1
safari 10

The same applies to iOS: iOS 10, 10.3, 11.0 & 11.3 were meaningful engine updates; that's why "last 2 iOS versions" report:

ios_saf 11.3
ios_saf 11.0-11.2

and "last 4 iOS versions":

ios_saf 11.3
ios_saf 11.0-11.2
ios_saf 10.3
ios_saf 10.0-10.2

For reference, here is the Safari bug which doesn't list a version fixed other than "WebKit Nightly Build": bugs.webkit.org/show_bug.cgi?id=136041

I confirmed this bug no longer exist in iOS 10.3 & Safari (on macOS) 10.1. I'm not sure about iOS 10.0 & Safari 10.0 as I don't have them available for testing.

[Splaktar]

Oh good. I am glad that autoprefixer works that way! That was my thinking as well, that their dot releases contained significant fixes and features.

Thank you for confirming the fix exists in recent versions of iOS 10! I'm satisfied with that enough to close this issue.

Let's take the browser support discussion to https://github.com/angular/material/issues/9396.