Typing in the crate search bar at the top right scrolls up the page

[martijnarts]

I don't really know what else to say here. Seems to happen in Chromium and Firefox. I couldn't find another issue for this. Here's a recording:

https://user-images.githubusercontent.com/54749/207850931-384b04b2-f4b1-409a-bf36-04e22820ed65.mp4

[syphar]

( I deleted a comment that I couldn't reproduce it, but now I can).

[syphar]

cc @jsha @GuillaumeGomez one of you has any idea?

[GuillaumeGomez]

I'll try to take a look in the next days

[jsha]

A couple of notes on trying to reproduce this:

• If I pause JS executing in DevTools, then type a character in the search field and step through the resulting handlers, the scroll effect doesn't happen!
• This also reproduces in the local dev environment.

I think the next step is process of elimination - comment out various of the handlers and see what fixes it.

[jsha]

This is turning out to be a very interesting and unusual bug!

• It persists even when I disable JavaScript entirely in DevTools.
• Each character typed seems to result in a scroll of exactly one line.
• If I disable the .pure-menu-horizontal { white-space: nowrap }, each character typed seems to result in a scroll of about a quarter line.

Also worth noting that the scroll seems to be triggered by character entry, not keyup or keydown. If you hold down a key to type multiple characters, the page scrolls up continuously.

[jsha]

Another piece of data: the following patch eliminates the scrolling entirely. Edit: to be clear, 80px fixes it; anything less, like 79px, does not quite fix it. However, 79px almost fixes it. When I use 79px, the page scrolls by just one pixel per letter typed.

diff --git a/templates/style/_navbar.scss b/templates/style/_navbar.scss
index b8a44a0e..273ec19f 100644
--- a/templates/style/_navbar.scss
+++ b/templates/style/_navbar.scss
@@ -31,7 +31,7 @@ div.nav-container {
 
     .container, .pure-menu-horizontal {
         position: relative;
-        height: 100%;
+        height: 80px;
     }
 
     li {

Of course, this is not the right fix. The page winds up looking like this:

But it's interesting in that it gives an idea to the possible direction of the problem. It seems like some element is feeling too cramped in the topbar when keys are pressed. Maybe there's an invisible reflow going on that is changing the page size then immediately changing it back?

Also, this general category of "topbar elements would like to be bigger than they are" is something we've seen before.

Though, possibly contradicting the above: setting contain: content on the pure-menu-horizontal does not fix the bug.