Header collapsing/expanding on minute scroll event is annoying, removing related CSS and Javascript would be better.

[fidergo-stephane-gourichon]

Context

I read your rant about how a number of bad decision were made in darktable, breaking basic expectations from user, replacing common battle-tested behaviors with more complex and brittle specific behaviors.

The solution (a good solution IMHO) is to refrain from adding unnecessary complexity and keep things as simple as possible.

The best solutions are the simplest, the best tools are the simplest, the best life is the simplest. If simple tools can't accomodate your workflow, your workflow is probably to blame, not the tools.

I wholeheartedly agree. As our compatriot Antoine de Saint-Exupery wrote in Wind, Sand and Stars: “Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.” (original text in "Terre des hommes": "Il semble que la perfection soit atteinte non quand il n'y a plus rien à ajouter, mais quand il n'y a plus rien à retrancher."). It was about plane engineering, if you read the book, so this quote is more relevant than it may seem at first.

As a result I was much surprised that the very kind of mistake you try to avoid happened on Ansel website.

Description of the bug

The site features a header with sticky position and expand/collapse CSS rules and accompanying Javascript code to capture scrolling events.

When reading the site on a smartphone in landscape screen orientation, the header occupies a significant portion of the page height, leaving less space than expected to view the example images, etc.

"But", as you might think, "I've added code to make the header collapse nicely so as to be not intrusive".

Clever people are lazy. Being lazy means working less, then tiring less, and therefore working with a clearer mind and an healthier body: all that leads to better quality of work. Being lazy also promotes minimalism which helps maintainability and keeps the overhead low. This makes for long-term sanity of the projects.

Yet you have actually in this case added complexity with CSS rules and code that feel good yet it would have been better to do nothing of all this.

What actually happens is that reading on a relatively small screen of a smartphone implies often scrolling by small amounts. A nice solution it keeping a finger on the screen to scroll progressively, very naturally. But due to noise in sensor or minute finger motion, often the page may scroll up or down by as much as one pixel, which is enough to cause the header to unwelcomely expand back, and cover again the very text I'm reading or the top of the image I'm viewing.

Had the header been simply naturally (not fixed or sticky, just the default relatively) positioned at the top without any artificial CSS rule, there would have been no problem.

Steps to Reproduce

1. Open https://ansel.photos/fr/support/ (the behavior happens on all devices but it is annoying only on a device with limited height)
2. Scroll down
3. See that the header completely collapses as soon as the page is scrolled towards its bottom at least one pixel, and that symmetrically the header completely expands back as soon as the page is scrolled back towards its top by at least one pixel.
4. Scroll by various amounts down and up, and try scrolling by tiny amounts. Observe that scrolling one pixel is enough to cause the header to expand and cover part of the page.

Expected behavior

• Header relatively positioned just like any HTML element by default.
• If I want to see the header I scroll up to the top of the page by a simple fast finger swipe.
• If I don't scroll up to the top of the page it's because I'm reading the page content, not wishing to see that header.
• Less CSS rules, less code, behavior closer to pervasive basic expectations for a well-behaving web page.

Screenshot

From real device.

Header unwelcomely appears and clobbers the top of the image.

Removing the unneeded CSS rules will ensure no screen area wasted, better viewing.

Which commit introduced the error

The collapse/expand behavior was added on commit f61a328 on 2023-03-18.

• CSS classes .scrolled-down and .scrolled-up
• Javascript Code

Class sticky-top on nav bar was added before, replacing fixed-top. I guess the collapse mechanics were added as a workaround to a previous design that had the navbar permanently sticky on top, and before that fixed on top since the first commit.

commit 98ac99709ff052f2f5071be98b397836fb43b559
Author: Aurélien PIERRE <[email protected]>
Date:   2022-11-30 20:39:53 +0100

    First commit

diff --git a/themes/ansel/layouts/partials/header.html b/themes/ansel/layouts/partials/header.html
new file mode 100644
index 0000000..a09f06d
--- /dev/null
+++ b/themes/ansel/layouts/partials/header.html
@@ -0,0 +1,25 @@
+<nav id="nav" class="navbar fixed-top navbar-dark bg-dark">

Suggested change

1. Remove class sticky-top
2. Remove associated Javascript code
3. Enjoy improved use of screen height, simplicity

-<nav class="navbar sticky-top navbar-dark bg-dark navbar-expand-sm">
+<nav class="navbar navbar-dark bg-dark navbar-expand-sm">

associated Javascript code in themes/ansel/static/js/scripts.js.

System

• Hardware: Samsung S series smartphone (any small screen machine, really)
• OS: Android (any OS capable of running a complete modern browser)
• Browser: Chrome (any, really)

Additional information

The sentence below appears when starting to open a bug report on Ansel.

Ensure it is not a new design first.

What does the sentence mean?

[fidergo-stephane-gourichon]

Since a picture is worth a thousands words, perhaps a video is even better. Here's the issue in real action on a smartphone.

Now imagine reading your articles thoroughly while commuting, and having the header slide up and down several times per minutes for half an hour.

ansel_header.mp4