MDN-Browser-Compatibility-Report-2020

I still find differences in flexbox and grid. I also had one with object fit recently. When the image was 100% tall Chrome would shrink the image height. Other browsers tried to show the full image height as expected. 1 1 don't really like that chrome and firefox handles images inside flexbox differently Chrome's calculation of flex with overflow really bit me. While Firefox and Safari were doing the calculation correctly. I had to read a bunch of bug tickets to find out that adding min-height to my div was needed. I Chrome doesn't support the gap property with Flexbox. https://bugs.chromium.org/p/chromium/issues/detail?id=762679

I Internet Explorer (still supporting 11) especially regarding Flexbox.

I Long standing bugs in only one browser, such as the flexbox bug with fieldset in chrome. Just fix it already.

Flexbox also came up in some interviews. One participant reported this as their main pain point, especially with vertical layouts:

Most of the problems I've had have been with Flexbox. Especially when you apply Flexbox in a layout you have to be aware of the different syntax for different browsers, and that's really painful. If you forget something you can have issues in some browsers. I've had a lot of problems with vertical Flexbox and Safari, for example. Even having a specific syntax it doesn't behave the same way, I think, in vertical Flexbox. Where you apply Flexbox to columns and not rows and want to center whatever content vertically, I've had a lot of issues with that. Specifically things like flex auto, flex 100%, I've been having to apply that specifically for Explorer and Edge. [...] I wasn't able to fix it, so I had to get rid of Flexbox, finally, and apply table displays for what I wanted to achieve. [...] The layout was: everything was vertically centered in the layout, the whole content, and it had to be always centered in the screen, in the browser, and I couldn't use Flexbox for that. I also think we normally tend to use Flexbox for things that it's not intended for, and I think that's because we didn't have CSS Grid until now, until very recently.

Made with FlippingBook - professional solution for displaying marketing and sales documents online