carson
(Carson)
June 24, 2022, 9:15pm
1
I wasn’t sure whether to put this under bug or UX, and this can be considered petty and a non-issue, but I noticed on many Discourse themes there’s an annoying 1 pixel jump below the navigation bar whenever the page is refreshed and the page overflows-y (scrollbar is present), present on both mobile and desktop. I wonder if there was a way to get rid of it for a smoother UX?
5 Likes
Johani
(Joe)
June 27, 2022, 1:32pm
6
Thanks for the report @carson . We’ve managed to track the issue down and will push a fix within the next few days.
5 Likes
Johani
(Joe)
July 13, 2022, 7:04am
8
Thanks for reporting the issue @carson
We have a fix for it here
discourse:main
← hnb-ku:fix-navigation-jitter
opened 04:27AM - 13 Jul 22 UTC
Context: https://meta.discourse.org/t/pixel-jump-whenever-page-refreshes-mobile-… desktop/231053
We currently add 1 extra pixel when we try to restore the last scroll position on a few routes.
This is causing a bit of jumpiness, as described in the linked topic above.
<img height="300" src="https://d11a6trkgmumsb.cloudfront.net/original/4X/a/e/9/ae9e69f7fd40daba8bc0b41fec9cafbf0d4b3830.gif">
Notice how the content shifts by 1px while stuff loads.
I believe this 1px that we add is an artifact from the days when we used to set the header to `fixed` but I'm not sure. Either way, the header now uses `position: sticky;` so we shouldn't need that 1px adjustment.
This PR introduced no visual changes except that it fixes the jitter mentioned above.
6 Likes