951705 - Scrollbars on new MDN are practically invisible

Status: RESOLVED INVALID

(developer.mozilla.org Graveyard :: Design, defect)

Description

[Kartikaya Gupta (email:[e-mail])]

The new MDN looks nice, but the top-level scrollbar is pretty much invisible (Firefox Aurora on Mac OS X). This makes it really hard to know how far down the page I am and how much more there is to go. Restoring the scrollbar color to the default would be nice rather than the current white-on-white scheme. Note that the scrollbar for subframes like the "In this article" sidebar are fine, it's just the top-level one that is white-on-white and so not visible.

Comment 1

[John Karahalis [:openjck]]

Thanks for reporting this. Can you please attach a screenshot?

Comment 2

[Kartikaya Gupta (email:[e-mail])]

Attachment: Screenshot

Attaching a screenshot taken while I was on https://developer.mozilla.org/en-US/Firefox_OS

Note the scrollbar on the right edge of the screenshot is visible while the page background is blue, but once I scroll down to where the page background is white (which is the vast majority of the page) the scrollbar is barely visible.

Comment 3

[John Karahalis [:openjck]]

Do you see the same issue on other white-background pages like the following?
https://www.google.com/#q=test&safe=active

This sounds like a browser. I don't think we change the color of the scrollbar (at least I hope we don't).

Comment 4

[Isac Lagerblad (:icaaq)]

The scrollbar color is different because of the background-color that is set on the body element.

background-color: #00539F;

remove that and the scrollbar appears. Tricky...

Comment 5

[Kartikaya Gupta (email:[e-mail])]

(In reply to John Karahalis [:openjck] from comment #3)
> Do you see the same issue on other white-background pages like the following?
> https://www.google.com/#q=test&safe=active

No, on that page the scrollbar is dark and easily visible.

Comment 6

[John Karahalis [:openjck]]

(In reply to Isac Lagerblad (:icaaq) from comment #4)
> The scrollbar color is different because of the background-color that is set
> on the body element.
> 
> background-color: #00539F;
> 
> remove that and the scrollbar appears. Tricky...

Interesting. I would still call this a browser bug--if the browser shows a dark scrollbar on pure white (#fff) pages, it should also show a dark scrollbar on an off-white page like this.

That's not to say we shouldn't do anything about this, but we should at least also push this upstream.

Comment 7

[Isac Lagerblad (:icaaq)]

(In reply to John Karahalis [:openjck] from comment #6)
> (In reply to Isac Lagerblad (:icaaq) from comment #4)
> > The scrollbar color is different because of the background-color that is set
> > on the body element.
> > 
> > background-color: #00539F;
> > 
> > remove that and the scrollbar appears. Tricky...
> 
> Interesting. I would still call this a browser bug--if the browser shows a
> dark scrollbar on pure white (#fff) pages, it should also show a dark
> scrollbar on an off-white page like this.
> 
> That's not to say we shouldn't do anything about this, but we should at
> least also push this upstream.

This is more a OSX bug/feature because google chrome and safari has the same behavior.

Comment 8

[John Karahalis [:openjck]]

Would someone on OSX be interested in filing this bug upstream?

https://developer.apple.com/bug-reporting/

Comment 9

[Kartikaya Gupta (email:[e-mail])]

I don't think this is an OSX bug. It's just that all the browsers do the same thing, which is use a light scrollbar when the background of the page is dark and vice-versa.

In this case the background-color of the page is #00539F which is a dark blue, so it makes sense that the scrollbar is light. It just so happens the page then puts a lot of white content over top of the dark background color which defeats the algorithm used to pick the scrollbar color shade. On all browsers.

Comment 10

[David Walsh :davidwalsh]

This isn't something for the MDN team to fix, it's a core issue.