MDN-Browser-Compatibility-Report-2020

Another interview participant reported problems achieving the same height of Flexbox layouts cross-browser:

We had a carousel, and all the slides should have the same height, the height should be dependent on the highest slide. So Flexbox, Flexbox, another Flexbox, all nested inside each other. We didn't start from scratch, obviously, we just used a slider component that was already there. The slider component is not the issue here, in this case. Flexbox had differences between Firefox and WebKit- or Blink-based browsers. We couldn't achieve these equal height slides on anything but Gecko. In Gecko it worked fine, in all other browsers it did not, so we also needed to have a JavaScript solution here. Doing layout calculations in JavaScript is never clean, it always feels a bit dirty, but in this case the slider's based on JavaScript anyway, so we made this tradeoff. [...] The way Glide.js works is you get a container where all the slides are stored and it uses Flexbox for display values, as far as I know. You should usually be able to give each slide the same height, but it didn't work in anything but Firefox. Don't know why. Among the things that bug me the most, it's mostly little differences in Flexbox implementation. Of course we have to support IE11, but even in other browsers you see a lot of differences. This is something you face almost on a daily basis. You know your way around it, especially with IE11, after a while. But I think there are still some bugs that remain, even in modern browsers.

Finally, one interview participant expressed that Internet Explorer had been especially problematic with regards to Flexbox:

All the Flexbox gotchas that IE has are pretty frustrating, and I'm intimately aware of many of them. This is actually the first time I've not had to support IE in my career, so it's pretty nice. [...] A lot of the flex issues were around height and flex-grow or flex-shrink. Just simple things like explicitly setting a height on the flex child would fix the issues. Flexbox in Internet Explorer Internet Explorer 11 supports Flexbox without prefixes but with a number of well-known issues, many of which were fixed in Edge. Several comments suggested that Flexbox is a bigger pain point when supporting Internet Explorer.

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