That time my navbar went full-blown 1990s geocities on Chrome mobile

I spent two hours debugging a nav bar that kept stacking vertically on iPhone Safari only. Turned out flexbox was breaking because I forgot to set flex-shrink to 0 on the logo container. Has anyone else had browser-specific flexbox bugs that made zero sense?

2 comments

2 Comments

eric3593d ago

Oh man, that's some classic CSS ghost behavior right there lol. Flexbox on mobile browsers is basically playing Russian roulette with your sanity. One time I spent an hour wondering why my grid items were overlapping on Android Chrome and it turned out I forgot to add min-width 0 to a child element. Still have no idea why that fixed it, but it did. Safari is especially cursed, I swear it interprets flex properties like a teenager reading a recipe for the first time.

sandra1463d ago

min-width: 0 is the ultimate flexbox cheat code that nobody talks about. Safari is gonna Safari though, good luck with that.