3 ms·
I love flexbox. But be aware what it's a beast which is not that super-well supported as you might think when you look it up in caniuse. When I'm fixing cross-
by madethemcry 10y ago
I love flexbox. But be aware what it's a beast which is not that super-well supported as you might think when you look it up in caniuse.
When I'm fixing cross-browser bugs nowadays it's mostly about flexbox. It's not very often and I can always fix it in a small amount of time. But it gives me an unpleasant but also nostalgic flashback of the old days in the 00s where I fixed more CSS than I originally developed.
So yes, from time to time I run into different and not so obvious problems. My holy grail to work with flexbox today is this list:
https://github.com/philipwalton/flexbugs https://github.com/philipwalton/flexbugs
Two recent issues I ran into:
There is a very nasty "bug" in the current Firefox browser. It's not a real bug- more a different interpretation of the standard which will hit any developer not working primarily with Firefox I guess. It's about the intrinsic size of a flex item in combination with fluid images. You have to apply min-width: 0 to the flex-item or you get a (very) wrong sizing in some circumstances. See [2] and [3]
And another one. Most of the time I think about IE11 that it's a mostly 'modern' browser and therefore supports flexbox very good. Yes it is good enough to use. But don't underrate the flexbox bugs (just glimpse through [1]). For example you have to set `min-height > 1px` on a flex container to prevent it from collapsing in some scenario (holy grail layout is a very common case). See here [4]
[1] https://github.com/philipwalton/flexbugs https://github.com/philipwalton/flexbugs
[2] https://bugzilla.mozilla.org/show_bug.cgi?id=1108514 https://bugzilla.mozilla.org/show_bug.cgi?id=1108514
[3] https://github.com/philipwalton/flexbugs/issues/41 https://github.com/philipwalton/flexbugs/issues/41
[4] https://github.com/Modernizr/Modernizr/issues/1301 https://github.com/Modernizr/Modernizr/issues/1301
- tomsaffell 10y agoGood to know! How do you handle Safari 8?
- zghst 10y agoSafari 8.1
- zghst 10y agoHave you used intrinsic size values to alleiviate bugs? I found that the hell out a lot and their support is good for where I'm experiencing issues w Flexbox
- bzbarsky 10y agoIt's not so much "a different interpretation of the standard" as the standard draft having changed and Firefox being the only browser that has implemented the change so far...