Spent 4 hours trying to get a simple CSS grid to work right

I mean, the layout looked fine in Firefox but completely broke in Chrome. I finally found the issue was a missing `grid-template-areas` declaration. Has anyone else had a browser-specific bug that took forever to track down?

3 comments

3 Comments

patriciap5216d ago

Honestly I don't see it as a nightmare. @the_stella Those fixes feel like solving a puzzle to me.

the_stella17d ago

Ugh, browser bugs are the worst. I once had a flexbox sidebar that just vanished in Safari for no clear reason. Took me half a day to realize it was a weird thing with `min-height` on a parent container. Adding `overflow: auto` fixed it, but finding that was pure pain. Those little differences that aren't in the docs just eat your time.

hart.mark17d ago

Actually overflow: auto can cause its own problems with scrollbars showing up where you don't want them. The real fix for that Safari flexbox bug is usually adding a height: 0 or min-height: 0 to the flex child. Those browser workarounds are a nightmare, you fix one thing and break another. I've wasted whole afternoons on stuff like that.