I noticed a bug when using the search box, when I backspace all my text and make it empty, the header becomes a bit taller and janks the page.
Normal, starts at 40px:
After typing some text and backspacing it jumps to 46px.
I was curious what was happening so I tried it in Chrome and couldn't reproduce it. But then through a process of elimination found that the flex
class on the <input>
is the culprit. Deleting flex
fixes the issue. I don't think it should be necessary anyway because I think flex
is only necessary for elements with children.
I don't know why Safari behaves like this though.