layout-row with layout-wrap and percent flex widths, in Safari

[lucasmaj]

#1720 appears to be back: in Safari, layout-row with layout-wrap and percent flex widths

{flex: 1 1 0;} for layout-row children solved my problem

[dvdvck]

Hi @lucasmaj, could you share that css snippet workaround?
thanks

[lucasmaj]

In my particular case the children of .layout-row were all flex-50 so this solution worked for me:
.layout-row.layout-wrap > .flex-50 { flex: 1 1 0; }

I am suspecting this would work in a more general case
.layout-row.layout-wrap > * { flex: 1 1 0; }

Apparently Safari prefers flex: 1 1 0; over flex: 1 1 100%; when parent does flex-wrap: wrap;

[stephengardner]

Oh my gosh this issue came back. This has blown my last two days. Working on a PC and trying to debug Safari issues is the actual devil.

Consider this case:

  <div id="menu" layout="row" layout-wrap layout-align="space-between center">
    <div class="menu-item" flex="100" flex-gt-xs=50">
      <md-button>
        X
      </md-button>
    </div>
    <div class="menu-item" flex="100" flex-gt-xs="50">
      <md-button>
        Y
      </md-button>
    </div>
     ...
  </div>

We want the menu items to be full-screen, but for >gt-xs we want them to be half screen.
flex: 1 1 0; does not work in this case.

[flobiwankenobi]

That doesn't really work @lucasmaj. If I apply your snippet, the wrap just getting ignored and it behave like a normal layout-row.

[lji687]

+1

We are currently using .layout-row.layout-wrap > * { flex: 1 1 0; }, b/c it makes things a little better in safari. However, this causes problems with layout-wrap in Safari and Chrome.

[stephengardner]

So I'm assuming based on the OP that this was fixed before? Can anyone decipher what happened to re-instigate this problem? This is huge for us.

[brianfeister]

So, what's the release cycle like these days? I know many of the team have moved onto https://material.angular.io/ ... any chance of getting a fix for this in a 1.1.5 release @ThomasBurleson ?

Also, should this have the label P1 - Broken Renders / Major Use Cases added?

.layout-row.layout-wrap > * { flex: 1 1 0; } doesn't work for my use case at all, it prevents the elements from wrapping so with that "fix" I have 20 elements. They used to just mimic typical box-model float: left, but with that fix applied they just create a horizontal scrollbar and overflow.

[brianfeister]

@ThomasBurleson I've pulled current master and am tinkering with a fix locally right now. It can be fixed by reverting all of the flex: 1 1 100%; change from c6fb5a5#diff-cd89844cbb4bd719d867bb0d67064ba1L133 back to flex: 1 1 #{$value};

c6fb5a5

I would argue the current bug is more severe than #5345 ever was and we should consider reverting #9572

Here is a Codepen of the working fix in safari from RawGit pointing to my (git add -f ./dist/angular-material.css) fork for demo purpose only:

http://codepen.io/brianfeister/pen/ybYyGr

/cc Also tagging #10345, #10388, @herophuong, @EladBezalel, @clshortfuse, @crisbeto

[stinaq]

I also have a workaround that I'm not proud of, and it's quite large, but it works for me for the moment.

[class*="flex-"] {
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
}

  > .flex-gt-xs-33 {
    @media (min-width: 600px) {
      flex-basis: 33%;
      max-width: 33%;
    }
  }

And the last part I have the duplicated to all the cases where I've needed them.

As I said, not a great solution, but it works

[stephengardner]

1.1.4 was recently released.

Can anyone confirm this is fixed?

[guiporto]

@stephengardner it wasn't fixed 😢

[brianfeister]

Probably silly to do so, but can confirm it wasn't fixed in 1.1.4. I have a mission-critical application that depends on this project, so I was forced to do something hack-ish to move forward. I took the various source .scss files and stripped them so they only generate the layout bit as it pertains to the incorrect flex attribute. It's still a huge 42K minified, but it was the only way for my app.

If someone else wants the override / shim, it can be found here:

https://github.com/brianfeister/material/blob/5ea6d5a62e9038dcec8f258023b0e579839a5899/dist/angular-material.css