Mobile: scrolling to the bottom and opening navigation causes the view to jump

[Brian-Pho]

Describe the bug
The bug is unexpected behaviour when the user is on mobile and returns from navigation.

To Reproduce

1. Go to https://chirpy.cotes.info/posts/write-a-new-post/.
2. Open up Chrome Dev Tool and enter mobile view (Toggle device toolbar) with device "Pixel 2" selected.
3. Scroll down to the bottom of the page.
4. Open navigation.
5. Close the navigation.

Expected behavior
The view should not jump after going to navigation.

Screenshots

1. Scroll to bottom:
   
2. Click on nav:
   
3. Click on grey area:
   

Desktop:

• OS: Windows 10
• Browser: Chrome
• Version: 80

Smartphone:

• Device: Pixel 2

Notes
This bug doesn't occur anywhere else on the page except when at the very bottom.

[cotes2020]

Thanks, this is a good bug report, it is detailed and reproducible, and I will take the time to deal with it.

[Pinnaclenetworking]

This may be an issue with animation speed settings in Android devtools... I am on .5 and it doesn't seem to "jump"

[cotes2020]

@Brian-Pho After testing, I found that this issue only occurs in device emulators for Chrome and Opera devtools; the simulator will automatically change the value of scrollTop to cause "jumps". This issue has not been found to occur in real mobile browsers, maybe we should just ignore it.

[Brian-Pho]

@Brian-Pho After testing, I found that this issue only occurs in device emulators for Chrome and Opera devtools; the simulator will automatically change the value of scrollTop to cause "jumps". This issue has not been found to occur in real mobile browsers, maybe we should just ignore it.

I just tested it on my physical Pixel 3 device and it jumps. If you aren't seeing it anywhere else, feel free to ignore it. But if you have the fix please let me know because I'm using this theme for one of my websites. Thanks.

[cotes2020]

What's the type and version of broswer on your Pixel 3 device?

[Brian-Pho]

What's the type and version of browser on your Pixel 3 device?

I'm using Chrome version 80.0.3987.149 on Android 10, Pixel 3 Build/QQ1A.191205.008

[cotes2020]

@Brian-Pho
Sorry for keeping you waiting so long. Now I have tried to fix this issue at 2395a34396946d89397e61a74fdbbb077c369c35 (it passed the test on Chrome devTool), but I don't have a physical Pixel 3. Could you be a volunteer to help me test whether this compatibility problem is solved or not?

[Pinnaclenetworking]

I don't have a pixel 3 either.... Only a 2xl

…

On Thu, Apr 16, 2020, 12:39 PM Cotes ***@***.***> wrote: @Brian-Pho <https://github.com/Brian-Pho> Sorry for keeping you waiting so long. Now I have tried to fix this issue at 2395a34 <2395a34> (it passed the test on Chrome devTool), but I don't have a physical Pixel 3. Could you be a volunteer to help me test whether this compatibility problem is solved or not? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#37 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AOXMXW3MBC2K5SJUZR4ZIULRM4YFLANCNFSM4K7OH66A> .

[cotes2020]

I don't have a pixel 3 either.... Only a 2xl

If the Pixel 2 XL runs Android 10 & chrome 80, it should be enough to test the problem. P.S. I don't have any android devices, so I can't test it.

[Brian-Pho]

My apologies for not responding. It is difficult to test the fix since this isn't deployed anywhere. I'll test it by applying the fix to my own site and commenting on my results.

[cotes2020]

It has been deployed to the demo site https://chirpy.cotes.info

[Brian-Pho]

I can confirm the fix works on my Pixel 3, thanks for fixing. :)