search

SnapDrop / snapdrop

A Progressive Web App for local file sharing
https://snapdrop.net
GNU General Public License v3.0
18.37k stars 1.68k forks source link

Flickering due to scrollbar in desktop PWA #196

Open abhijit-hota opened 3 years ago

abhijit-hota commented 3 years ago

Environment

The Issue

In the PWA installed from MS Edge, when the info icon is clicked, the splash screen shows up but the scrollbar repeatedly comes and goes from the view, making it really unsmooth.

lol

Note

It runs smoothly in the browser but not in the PWA.

P.S. Thanks for the awesome app, @RobinLinus !

titivermeesch commented 3 years ago

I've seen this on some other apps as well. I'm running on MacOS and I don't have that issue due to how the scrollbar is handled.

Would a simple fix be to just completely disable the scrolls? with overflow: hidden ?

abhijit-hota commented 3 years ago

Would a simple fix be to just completely disable the scrolls? with overflow: hidden ?

If I'm looking at the right part of code, the property is already there.

https://github.com/RobinLinus/snapdrop/blob/585a3d02fd2f69fa2afa99a02e9572e7d149ebf4/client/styles.css#L16-L23

RobinLinus commented 3 years ago

Only overflow-x is hidden, however overflow-y is not because sth like overflow-y:auto is required to use the "pull down to reload the page"-feature on Android. I tried to fix it in a9f9ee73599b19feefe131bbf14a0ef97505e040 using a CSS browser detection hack.

Does that work for you?

EDIT: Looks like this browser detection hack works only for Edge version < 79...

abhijit-hota commented 3 years ago

Still having the problem. :/

Please note that I don't have problems in the website. Only in the PWA

Bellisario commented 3 years ago

@abhijit-hota, your MS Edge is the "old" or the "new" version? I am asking this because, as far as I know, the "new" is based by Chromium... So, I think that the problem can be either a "config" for MS browsers on CSSs or a MS Edge bug, because I've tested Snapdrop PWA on Chrome, but it works correctly...

abhijit-hota commented 3 years ago

@Bellisario It's the new version which is made on Chromium.

Bellisario commented 3 years ago

This is an example of MS Edge scroll issue: https://answers.microsoft.com/en-us/edge/forum/edge_issue-edge_win10/microsoft-edge-have-flicker-issues-with-scroll/de78d2b5-a229-483a-8d71-d23bf7efda1b

It's only an example of many others: I think that it's their issue, because this browser, strangely, has problems with scroll... :open_mouth:

lionel-rowe commented 2 years ago

I've observed this behavior in Chromium 98 (Windows 10), both Chrome and Edge flavors, without any PWA install or browser extensions. Adding overflow: hidden; or overflow-y: hidden; to the root html element fixes it.