pub-6887543428250003

CSS TRICKS

• 7 – Normalizing Cross-browser Flexbox Bugs — Philip Walton

"Update: as a follow-up to this article, I’ve created the Github repo Flexbugs: a community curated list of cross-browser flexbox issues and their known workarounds. The goals is if you’re building a website using flexbox, and something isn’t working as you’d expect, you can find the solution there.

Way back in September of 2013, while testing my Solved by Flexbox project, I discovered a bug in Internet Explorer 10 and 11 that was preventing my sticky footer from actually sticking to the bottom of the page. I spent some time trying to work around the issue, but all my attempts failed.

At first I was really annoyed. Before flexbox, it was impossible to build a sticky footer layout with just CSS unless you knew the exact dimensions of both the header and footer.[1] Flexbox changed this—finally we had respectable CSS solutions to today’s modern, responsive layouts.

After my initial disappointment, I eventually concluded that this honestly wasn’t that big of a deal, and I released the project, despite the buggy behavior. I mean, from a progressive enhancement standpoint, my solution was still pretty good. It worked in Chrome, Firefox, Opera, and Safari, and while it wasn’t perfect in Internet Explorer, it wasn’t completely broken either. The content was still accessible, and it would only render incorrectly on pages with minimal content. On longer pages, it looked just like every other browser."

Flexbox – I need to study up. Probably some browser-specific issues as well. The only thing that would be perfect about Internet Explorer would be it’s demise.