RobinLinus
Flickering due to scrollbar in desktop PWA
Environment
- OS: Windows 10
- Browser: MS Edge 87.0.664.60
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.
Note
It runs smoothly in the browser but not in the PWA.
P.S. Thanks for the awesome app, @RobinLinus !
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 ?
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
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...
Still having the problem. :/
Please note that I don't have problems in the website. Only in the PWA
@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...
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:
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.
