Flexbox bug with brand padding #68
Description
Original writeup: #66 (comment)
Ok so an update, I think I've narrowed it down, and AFAICT it's a bug related to the fallback display property on .navbar-item. This was happening on master as well, so it's not something I introduced in this branch. It's just more noticeable on this branch because of the element changes (which reduce padding slightly).
The easiest way to repro is to:
Open dev tools on the side of the window
Shrink the viewport slightly larger than the 768 breakpoint
Close dev tools
Reopen dev toolsAnd the issue is present. As soon as you reload the page, it resolves. Here's what it looks like happening in real time on this branch:
And this is what is looks like happening on the master branch
It's up to you whether or not you want to proceed with merging this. I'm going to open up a separate issue for this problem.
I have a strong hunch that the issue has to do with the webkit fallback settings on the display property of the .navbar-item class.
Specifically, the -webkit-box. The reason for that hunch, is, when loading the window, the navbar-item is 123.16px wide and during the bug the width is 105.69px. After reloading the page to reset the width back to 123.16px, if you disable the css declaration display: flex (which activates the fallback, display: -webkit-box, the width drops down to 105.69px, the same width that's present during the above bug.
But unlike when the bug is present, when that fallback is activated the spacing between the logo and the header is reduced, so the padding is shrinking proportionately
This issue is almost like the fallback declaration is getting combined with the display: flex declaration. Super weird stuff. It's worth investigating whether this is a bug present in bulma or if it's something specifically with the styles defined in Ignite. The navbar is using hardly any custom styles and is basically stock bulma.