Hall
Log in

Share feedback, ideas and get community help

Updated 7 months ago

[bug][safari] Clearing the search text input janks the page until blurred

At a glance

A community member noticed a bug in the search box where the header becomes taller when backspacing to clear the input. They found that the flex class on the input element was the culprit, and removing it fixed the issue. The community member couldn't reproduce the bug in Chrome, but it occurred in Safari. Another community member commented that it was a "super weird but interesting bug" and thanked the original poster for bringing it up.

BBrad

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.

N
1 comment
NNathan Hur

Super weird but interesting bug, thanks for picking that up!