Flexbug #4 fix breaks Webkit

[pascalduez]

Hi,

the fix for Flexbug #4 targeted at IE10/11 happens to break Webkit browser like Safari.

https://bugs.webkit.org/show_bug.cgi?id=137730

Seems to be fixed in recent versions, but it's impacting quite a lot of users.

Investigating how we could fix/scope it.

Codepen to come.

[philipwalton]

I'm not following you. The workaround suggested in flexbug 4 is about 0 vs 0%. The bug you linked to only mentions 100%.

What about the flexbug 4 workaround breaks Webkit?

[Safe-Mode]

It breaks mobile chrome and opera mini, noticed today!

[vvs]

@philipwalton The main issue with recommending 0% in Flexbug 4 is that 0% IS NOT equal 0px.

0px means literally 0, but 0% (any percent really) means "auto" if the parent doesn't have the size specified.

And by default the flex items don't have the sizes set, so any flexbox inside flexbox might encounter the pretty severe difference between 0px and 0%.

I'd say that the wording in Flexbug 4 suggestion needs to changed and percentages should be avoided. Alternatively, one can add explicit width/height to the parent to make 0px and 0% mean the same.

[vvs]

Also, here's the Chrome dev's evaluation of 0px and 0% being different:

https://bugs.chromium.org/p/chromium/issues/detail?id=495306