search

philipwalton / flexbugs

A community-curated list of flexbox issues and cross-browser workarounds for them.
MIT License
13.63k stars 495 forks source link

Flexbug #4 fix breaks Webkit #235

Open pascalduez opened 7 years ago

pascalduez commented 7 years ago

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 commented 6 years ago

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 commented 6 years ago

It breaks mobile chrome and opera mini, noticed today!

vvs commented 6 years ago

@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 commented 6 years ago

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

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