lässt Platz am unteren Rand des Chroms

Das Problem ist, dass Sie die Elemente mit translateY(2000px) nach unten schieben und dann mit translate(0px) wieder nach oben ziehen. Chrom lässt also unten einen Platz für sie, wenn das Sinn macht. Dieses jsFiddle demonstriert das Problem. (Ich habe mich nicht mit allen Vendor-Präfixen beschäftigt).

Stattdessen werden sie standardmäßig nach unten verschoben und auf scroll, ähnlich wie , hochgezogen.

Wenn es immer noch fehlerhaft ist, animiere Rand oben oder oben auf absoluter Position . Übersetzen beeinflusst das Seitenlayout nicht so sehr und ist besser für die Leistung, aber das ist Teil Ihres Problems, oder?

zu einem anderen Hinweis, ein paar Probleme, die ich gefunden habe:

1. Die Leistung Ihres Javascript hier wäre schrecklich. Jedes Mal, wenn der Benutzer nach Abschluss aller Animationen nach oben oder unten scrollt, führen Sie diese Funktion aus, um die Position zu überprüfen. Ich bin mir sicher, dass Sie es sehr oft umgestalten können.
2. Sie müssen auch Benutzer mit deaktiviertem JavaScript berücksichtigen. Derzeit ist nichts auf der Seite dargestellt.
3. Ich denke, dass in Ihrem Suchfeld eine Mindestbreite eingestellt ist und es sich auf schmalen Bildschirmen außerhalb des Rahmens befindet.

Sie können unter folgendem Code versuchen:

Ändern Sie die Position relativ zur statischen und überprüfen Sie, ob es funktioniert.

Viel Glück ....