Skinny Scrollbars Chrome

[rgibson1]

Is anyone else seeing REALLY skinny scroll-bars in Chrome + Canvas? A lot of chatter on general forums about the issue of skinny scroll bars, but none of the Chrome 'fat scroll bar' extensions seem to affect Canvas.

[chofer]

Hi rgibson1​...

Yes...I am also seeing a thin scroll bar inside of Canvas.  However, the scroll bar I see here in the Canvas Community seems to be normal size.  I also tried logging in to my Google Docs account, and that scroll bar seems to be a bit wider than the Canvas scroll bar, but thinner than the Canvas Community scroll bar.

Is there functionality that you are losing with the thinner scroll bar?  I did a quick Google search, and one of the websites I found was this (maybe you've seen something similar?): Resize and Style Google Chrome Scroll bar without Extension.  I'm no programmer, so I don't know if this would actually work, but it's maybe worth a try?

Hope this is helpful in some way, Rob.

[dhulsey]

I am seeing the thin bar too. Weird.

[ebissoon]

Hi,

I think what most people forget is that the "same" application might/will be different on different devices/platforms.

Chrome in Windows 7 and above will be different to Chrome on Apple/MAC iOS or Android on mobile devices.

My question to you and anyone else who has this issue is - what platform/OS is Chrome installed on?

I'd also recommend taking a screenshot of the issue and passing it on to the Canvas Support Team as it may be something they can fix in time for the next Live Production release.

I had a couple of issues with IE11 that I reported a few weeks back and was helpfully told other users were experiencing the same problem. It helps when you feel that you're not the only person experiencing the issue. They (Canvas) also fixed those issues on the next Live Production Release so I didn't have [technical] problems for very long.

Having said all that - Chrome is fine for me on Windows 7 and 8.1 OS on a desktop PC so it would be interesting to know what platform/device you're using Chrome with.

Eric

[c_t_coltman]

I can see a thin scroll-bar in Canvas using Safari and Chrome on a Mac using OSX Yosemite Version 10.10.5 - Safari version 9 and also Chrome 51.0.2704.84 (64 bit). On a PC using Windows 7 I see the thin scroll bar in Chrome version 51.0.2704.79 m but the scroll bar is a normal width in Firefox version 47.0.

[ebissoon]

I take it back - I have a skinny scroll bar on Chrome

Windows 8.1 32 bit

Chrome Version 51.0.2704.84 m

I would need to verify this on Windows 7 now as well but don't have ready access to it at the moment.

I think I overlooked it initially because I use the scroll wheel on my mouse. I didn't/don't find the width of the scroll bar a nuisance because I simply don't use it.

Looking at it a little more closely I've noticed that the scroll bar is also missing the up/down buttons at the top and bottom of the chrome window which looks to me as if it (Canvas webpage) thinks I'm using a touch screen device rather than a "normal" desktop PC (if there is such a thing any more)

I think I'll take my own advice and report it to Canvas Support.

E

[rgibson1]

I'm on Win 7/Chrome 51.0.2704.84

[cesbrandt]

The scrollbar appears in Canvas on Google Chrome and other -webkit browsers to be so thin because the Canvas CSS makes it so. Here's a a page from CSS Tricks that can explain the CSS:

https://css-tricks.com/examples/WebKitScrollbars/

In specific regards to Canvas, the CSS that is causing it is as follows:

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 9px;
    height: 9px
}
::-webkit-scrollbar-track {
    -webkit-appearance: none;
    background: #fff
}
::-webkit-scrollbar-thumb {
    -webkit-appearance: none;
    box-shadow: inset 0 0 0 2px #fff;
    background: #b3b3b3
}

Sadly, there is no way to restore the scrollbar to default after it has been modified. Why? I haven't the faintest clue, but I've spent several hours researching it and the closest I have come is:

::-webkit-scrollbar {
    width: initial;
    height: initial
}
::-webkit-scrollbar-track {
    background: #f1f1f1
}
::-webkit-scrollbar-thumb {
    box-shadow: initial;
    background: #c1c1c1
}

This restores the default appearance of the actual scrollbar, but I have been unable to identify a method of restoring the arrows.

[ebissoon · Accepted solution]

Hi,

As promised I did report this to Canvas and here is their helpful reply:

Thank you for contacting Canvas Support! glad to assist you.

I am sorry to hear about the size of the scroll bar on Canvas, however I have seen [the] discussion about this on the Canvas community page.

We are working closely on trying to amend this on our future updates.

In the meantime, I would like to direct you to a site in which it helps users of chrome to resize scroll bars without the use of extensions.

If you have any other concerns please do not hesitate to contact us.

Hope that helps anyone who has this issue.

[cesbrandt]

I just want to point out that the "in the meantime" solution shouldn't really be considered a solution to the mentioned issue. This is so for five main reasons:

1. What is suggested is having the users modify their browser configuration for a single website in a manner that will effect every website they access.
2. Modifying the custom.css file, while works for Google Chrome 32 and below, is a global modification. The scrollbar for every webpage they access will be modified.
3. Making this modification sets default values for these pseudo-elements and would have no effect on the Canvas scrollbar due to the Canvas CSS having its own configuration which would override these modified settings.
4. Google Chrome is not the only -webkit browser on the market. Sure, it has the largest footprint in terms of usage, but it is not a monopoly on -webkit. This solution is not geared towards all users, just a selection.
5. As of Google Chrome 33, custom.css is not officially part of the browser. Details of it's removal and how-to recreate its functionality can be found at: Issue 318566 - chromium - User Stylesheets removal breaks all DevTools themes - Monorail

If you want to restore the larger scrollbar appearance for all users, it shouldn't be a solution you have to have the user implement unless all other options have already been exhausted. In this particular case, the suggestion is the exact same thing that I posted, yesterday, except that my suggestion is to put it in the institutions global CSS override file while they suggest having each individual user apply it to their browsers.