Hide scrollbar when opening an option?
Closed this issue · 16 comments
Is it only me that feels like this is a small nuisance in the design? The extension will jump when you open an option because the scrollbar pops up and moves everything to the left.
I'm not noticing this on macOS or Windows. What environment are you seeing this?
What I am noticing though, now that you mention it, is that on Windows Chrome, there is not a scrollbar when there should be one. Check it out:
Here is my behaviour:
I run google-chrome --disable-gpu-driver-bug-workarounds --enable-native-gpu-memory-buffers on Ubuntu 16.04 (with a .bashrc alias, I don't type that every time ;) ).
Also, I was just thinking, would it maybe be a nicer UX if the notification bar at the bottom was fixed (and maybe the top as well?), as in the scroll only happened in the middle options part? I could create a new issue to discuss that. It might very well not be a nice feature, it was just something that came to my mind.
Edit: Also just wanted to add, this is with the production extension from the Google Store, not a dev version where I changed something
And about your windows example: So it doesn't scroll at all? Also if you try scrolling within the window? And it cuts off where you cut off your screenshot?
I did some more digging on this scrollbar issue and here's the summary of it: the extension assumes that it can always be at least 498 pixels in height. This is a valid assumption in macOS, because if the main viewport is shorter than that, the extension window extends independently of the main viewport.
However this is not the case in Windows, as you can see here:
To answer this:
And it cuts off where you cut off your screenshot?
My screenshot actually includes the blue wallpaper of Windows 7. So Chrome is cutting off the extension window at the same time as the main window.
Now, I've confirmed that we do get scrollbars in Windows (and macOS) within the browser extension when its content height reaches a high enough value.
Okay, so for the windows part, that's okay, intended behavior yeah? As in, we assume any computer screen is 500px, and then the user just has to enlarge the window? Or should we try making it responsive?
For now, that's fine. We may not have much choice. And either way, the likelihood that someone would have a Chrome window height of less than 498px seems pretty edge case.
Yeah I agree, especially since extensions aren't supported on mobile Chrome
What do you think about the UX concerns though for my GIF from above? The jumping when you click the bar, is it something you think that should be fixed, or is it not really an issue in your eyes? I'll admit I'm definitely more back-end oriented, but I guess I'm also a user, and it seems like a bit of an annoyance in user-experience terms.
I agree it's a problem, though I'm not sure the solution of hiding the scrollbar is the right one. There are a decent number of Windows users who like the ability to click and drag the scrollbar itself as their primary means of scrolling. Instead, what I'd recommend doing is forcing a vertical scrollbar perpetually. It wouldn't be the most beautiful thing in the world but it would keep this from happening.
Yeah I think that makes sense.
I'm not sure exactly how non-beautiful it would be, but I guess a future issue could also be trying to style it to fit the chess.com design (which by the way, I really like the design of the extension!)
Well the width of the scrollbar is something like 20 pixels. We could just say that on Windows, the extension width is 20 pixels wider than what it is on Mac and then that'd guarantee an even layout.
Hmm... I don't quite think I know what you're talking about here? You mean standardizing the look across platforms?
But yeah I agree that for now forcing a vertical scrollbar is the way to go
Right currently the plugin's width is 300 pixels everywhere. We could make it 320 pixels on Windows and force a vertical scrollbar. That way the actual width minus the scrollbar is the same on both platforms.
Okay sure. I'll probably submit a PR soon that forces the vertical scrollbar, and I can put in that CSS as well and then since I don't have a Windows computer readily available, maybe you could help me check it out and see if it works well?
Will do!
Btw, most of my Windows troubleshooting is done in a virtual machine via https://github.com/xdissent/ievms. In case you're ever interested in setting up something similar on your linux box. :)
Cool, thanks :). I'm definitely more of a back-end coder, so I'm not sure if I'll need it, but that's definitely a cool project, so thanks for sharing!