Header flickering on mobile

Contribute UX

AI-generated summary

Header Flickering on Mobile

A discussion about a mobile issue where the header flickers or shakes in some topics. Merlls_Rizzini reported the issue and shared videos demonstrating the problem. codinghorror suspected that the JavaScript code calculating heights and positions on the topic page might be the cause.

codinghorror further elaborated that the issue could be related to mobile progress bar calculations, sharing another video. sam explained that the problem arises from a conflict between the browser’s attempt to move to the top and the mobile header’s decision-making process, suggesting a debounce to resolve the issue.

The issue has been addressed by Johani via a commit that fixes this and a few other mobile header issues.

1

Anyone knows if its a normal behavior in the header on mobile? I have no idea why its shaking (maybe its cause by gifs, youtube/twitter embeding?) in some topics. I used Material Design without CSS modifications (also in safe mode) but I still has this issue.

3 Likes
Page reload spring when reached bottom of page in iOS beta
2

I’ve seen that particular flickering before in other aspects of the design on mobile.

My suspicion is that the JS code that calculates heights / positions on the topic page is having trouble in some scenarios.

3 Likes
3

So it has no solution for now? :sweat_smile:

4

Same flicker here almost certainly related to mobile progress bar calcs.

3 Likes
5

We have a hack @eviltrout implemented back in the day to keep browser on current post after you navigate to it, we are at war with the browser that is insisting on moving us to the top. Concurrently @Johani’s mobile header is deciding what to do, so the two processes are fighting.

We basically need a debounce if sorts to make sure mobile header does not flicker

5 Likes
6

This definitely needs some fixing @johani

5 Likes
9

This and a few other issues in the mobile header will be fixed via:

https://github.com/discourse/discourse/commit/6d7c0c8f137bf1c4968e8777c7694fd2c1b7b392

Thanks for reporting the issue @Merlls_Rizzini :+1:

7 Likes
10

This topic was automatically closed after 23 hours. New replies are no longer allowed.