Closed Bug 1859940 Opened 1 year ago Closed 9 months ago

On some websites, the scrollbars that appear from pinch zooming are different theme than non-zoomed scrollbar

Categories

(Core :: Layout: Scrolling and Overflow, defect, P3)

Product:
Core
Component:
Layout: Scrolling and Overflow
Type:
defect

Tracking

()

Status:
RESOLVED INVALID

People

(Reporter: billdillensrevenge, Unassigned)

References

Details

Attachments

(4 files)

ScrollbarBeforePinchzoom.png
343.61 KB, image/png
Details
ScrollbarsAfterPinchzoom.png
387.77 KB, image/png
Details
BlueskyScrollbarChrome.png
334.88 KB, image/png
Details
A reduced test case of the issue on outlook.live.com
266 bytes, text/html
Details

Pinch-zooming in Firefox triggers scrollbars, which is good. But on some websites such as Bluesky, when you pinch zoom, the scrollbar changes color. Example URL https://bsky.app/profile/bsky.app (you'll need a Bluesky account to view this). I included screenshots so you can see what I'm talking about: in the first screenshot, observe the scrollbar is dark. But once I pinch zoom, the scrollbars are light (2nd screenshot)

Here is the 2nd screenshot

Component: General → Layout: Scrolling and Overflow
Product: Firefox → Core

Hmm, odd. I can see the same thing but my OS has to be in dark mode to see a difference. Must be something site specific about it, other pages that adapt scrollbars to dark mode (it doesn't happen automatically afaict) like twitter don't seem to have this problem. The decision to have scrollbars from pinch zooming I thought would happen pretty close to the decision for regular overflowing content, so a little surprising it can show a difference like this.

I went to it in Chrome and observe the scrollbar is light, so that makes me think this issue has to do with the way Firefox themes its scrollbars on sites and it's not doing that for this special case of pinch-zoom scrollbar. In Chromium, webpages have to set the color scheme meta tag to dark, otherwise the scrollbars will be light.

Botond probably can fix this: from comment #3 in this bug https://bugzilla.mozilla.org/show_bug.cgi?id=1656139
"The fact that the <div>'s scrollbars and the page's scrollbars look different is expected, because the page applies a CSS scrollbar-color property to the <div>'s scrollbar but not to the page's scrollbar."

I have 5 invite codes for Bluesky if anyone wants to make an account and take a look

(In reply to Will from comment #5)

I have 5 invite codes for Bluesky if anyone wants to make an account and take a look

(I have one, thanks.)

(In reply to Timothy Nikkel (:tnikkel) from comment #2)

Must be something site specific about it, other pages that adapt scrollbars to dark mode (it doesn't happen automatically afaict) like twitter don't seem to have this problem.

One potentially relevant difference between Bluesky and Twitter is that on Bluesky, the scrollable element is a subframe, while on Twitter, it's the root scroll frame.

So, when you pinch-zoom in on Bluesky, that creates a second set of scrollbars (since zooming always applies to the root scroll frame). You can see the original scrollbars if you scroll all the way to the right horizontally. It's the second set which don't have the dark-theme colors.

So, the described symptoms would be consistent with, say, the page only applying a scrollbar-color property to the subframe and not to the root scroll frame... except that I'm not actually seeing Bluesky use a scrollbar-color property.

So, it seems like changing the scrollbar colors to account for dark mode is done by the browser itself, though I'm not familiar with the details.

In the absence of scrollbar-color css, it seems like Firefox chooses the scrollbar colors based on the background color of the page, and not the light/dark mode of the OS. I tested using a simple page like

<html style="background: black/white">
<div style="height: 4000px"></div>
</html>

changing the bg color, and also changing my os setting for dark or light mode. Only the bgcolor on the page changed the color of the scrollbar.

The second set of scrollbars that are created when you pinch zoom Bluesky in Firefox, would it be a problem for Firefox to also theme those the same as the original scrollbar?

Btw Bluesky isn't the only website I've seen noticed this issue on, it's just the only one I can find at the moment

(In reply to Timothy Nikkel (:tnikkel) from comment #8)

In the absence of scrollbar-color css, it seems like Firefox chooses the scrollbar colors based on the background color of the page

I asked Emilio about this, and he confirmed that it's based on the background color, more specifically of the scrollable element.

However, I checked the computed styles on Bluesky, and both the the scrolling <div> and the <html> element have a black background color, so this in and of itself does not explain the bug.

Perhaps a reduced testcase from the page in question would help us understand what is happening.

The severity field is not set for this bug.
:hiro, could you have a look please?

For more information, please visit BugBot documentation.

Flags: needinfo?(hikezoe.birchill)
Whiteboard: [apz-needsdiagnosis]

Can someone post a reduced test case here?

(In reply to Botond Ballo [:botond] from comment #10)

However, I checked the computed styles on Bluesky, and both the the scrolling <div> and the <html> element have a black background color, so this in and of itself does not explain the bug.

Just to make sure, the background-color of the <html> is black, i.e. rgba(0, 0, 0, 255), not rgba(0, 0, 0, 0), right? In the following case, I can see this bug's behavior and the background-color of the <html> is rgba(0, 0, 0, 0), it's actually confusing.

<style>
html {
  overflow: hidden;
}
body {
  margin: 0px;
}
#container {
  background-color: black;
  overflow: scroll;
  height: 100vh;
}
div {
  background-color: black;
}
</style>
<div id="container">
  <div style="height: 4000px;"></div>
</div>

I found another example of this issue! https://mod.reddit.com/mail/all but it appears you have to be moderator of a subreddit to be able to see that page (it says "You must be a moderator to access this page" when I asked my friend to go to it. He is not a moderator of any subreddits)

Marking S3/P3 for now, but I think botond is doing some investigation at the moment.

Severity: -- → S3
Flags: needinfo?(hikezoe.birchill)
Priority: -- → P3

I can no longer repro on Bluesky (I think they made a change on their end) but I can still repro on https://mod.reddit.com/mail/all

Just noticed that I forgot to list by far the most visible example of this bug: https://outlook.live.com/mail/0/

I come across a webpage that has this issue every 2 to 3 weeks so it's not some one in a million edge case

The outlook one is exactly the case in comment 13.

Will, just to make sure that you enable "Always show scrollbars" option in the Windows settings? I do see this issue on outlook (and the test case in comment 13) with enabling the option, I don't see the issue with disabling the option.

Flags: needinfo?(billdillensrevenge)

I'm on Windows 10 and I toggled it off, restarted the computer, and it made no difference. Turned it back on and it's the same. So that Windows toggle seems to have no effect on Windows 10

Flags: needinfo?(billdillensrevenge)

The outlook case is a case in comment 13. There's a big element covers the whole document and the element's background-color is dark. But every ancestor elements' (including the root) background-color is transparent. Thus for the zoom scrollbars we use the default colors. I think this is correct. You can easily tell this behavior by setting height: 80vh or some to the big element (id=appContainer) on outlook.live.com, there will be a white blank area at the bottom of the document.

Interestingly they seem to do something by setting scrollbar-color property to body, not to html (or :root) unfortunately. Moreover the value is var(--neutralSecondary) transparent unfortunately, if it's not transparent, it will work as expected.

(In reply to Will from comment #20)

I'm on Windows 10 and I toggled it off, restarted the computer, and it made no difference. Turned it back on and it's the same. So that Windows toggle seems to have no effect on Windows 10

Thanks Will. I am not 100% sure yet, but the issue I am seeing might be different from what you are seeing.

Anyways, the outlook case looks kinda "INVALID" for me.

Okay, the reddit case looks same to me. I do see the issue even on the "You must be a moderator to access this page".

Status: NEW → RESOLVED
Closed: 9 months ago
Resolution: --- → INVALID
Whiteboard: [apz-needsdiagnosis]

I am sure that the bluesky case was fixed by this.

See Also: → https://github.com/bluesky-social/social-app/pull/2132

If yous think it's invalid/wontfix that's fine but I did come across this Chromium issue recently similar to this topic, it's worth keeping an eye on https://bugs.chromium.org/p/chromium/issues/detail?id=1423087

Thanks for the pointer. Once after the relevant spec issue was resolved to change the spec, we will change our behavior.

And just to confirm, if Firefox had the behavior mentioned in that spec/chromium bug, it would "solve" this issue we see on https://mod.reddit.com/mail/all and Outlook?

I think so, yes.

It's now at intent to prototype phase, see more here https://groups.google.com/a/chromium.org/g/blink-dev/c/9gZGGB38LvI/m/bVkYSMwZAgAJ

Mozilla has a positive position on it! https://github.com/mozilla/standards-positions/issues/995

So it looks like it's shipping in Chromium 125 https://chromestatus.com/feature/5089486318075904 . Is there already a Firefox bug opened for this or should I open it?

You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: