As the user navigates deeper into the hierarchy, ancestors fade out leaving empty space above and below the visible thoughts. This can end up being many screens worth if the hidden ancestors have many siblings.
Requirements
- Thoughts do not shift y position relative to the viewport as the user navigates deeper.
- No jitter
- Preserve iOS's characteristic elastic overscroll.
The current solution uses a clever but ultimately fragile and buggy technique of transforming all visible thoughts up and scrolling up by the same amount, at the same time, before the first paint. This gives the illusion that no thoughts have moved, and allows for native browser overscroll since the actual document is cropped. Unfortunately it requires complex calculations and is prone to flashes if even one frame off.
Documentation: https://github.com/cybersemics/em/wiki/Autohide
Full history and discussion: #1751
Proposed solution
- Allow empty space to build up, leaving the visible thoughts and scroll position as it is.
- Clamp scrolling to the visible thoughts only.
- Or rather, 1vh outside above/below the visible thoughts since they may be at the bottom of the screen. Basically just enough so that they are always visible.
- Emulate iOS elastic overscroll using smooth-scrollbar or modern replacement.
As the user navigates deeper into the hierarchy, ancestors fade out leaving empty space above and below the visible thoughts. This can end up being many screens worth if the hidden ancestors have many siblings.
Requirements
The current solution uses a clever but ultimately fragile and buggy technique of transforming all visible thoughts up and scrolling up by the same amount, at the same time, before the first paint. This gives the illusion that no thoughts have moved, and allows for native browser overscroll since the actual document is cropped. Unfortunately it requires complex calculations and is prone to flashes if even one frame off.
Documentation: https://github.com/cybersemics/em/wiki/Autohide
Full history and discussion: #1751
Proposed solution