Scroll bar can't be scrolled from the right edge of the window (Windows)

[perigozin]

Captchas

• [x] I have read the instructions.
• [x] I have searched existing issues and avoided creating duplicates.
• [x] I am not filing an enhancement request.
• [x] I have checked that this issue cannot be reproduced on Mozilla Firefox.
• [x] I have checked that this issue cannot be reproduced once I removed all my Mods and Custom CSS.

What happened?

As with any browser or program it is expected to be able to just move the mouse to the edge of the screen and clicking the scrollbar to be able to quickly scroll. In Zen (at least on Windows) there is a small gap between the scrollbar and the edge of the browser window, so whenever I need to use the scrollbar I have to actually look at it and click exactly on it, instead of just moving the cursor to the extreme right, knowing the scrollbar will automatically be in focus, which is annoying (I mostly use the scroll wheel but sometimes for scrolling longer pages the scrollbar is still useful).

I'm not even saying the gap should be removed, I like the design choice, but maybe the window border on the right side should register clicks for the scrollbar. Just a small UX improvement that would improve navigation.

Version

1.9.1b and 1.91.t

What platform are you seeing the problem on?

Windows - x64

What component is this issue related to?

Other

[sporocyst]

The gap belongs to the browser frame, while the scrollbar belongs to webpage itselft. It doesn't make sence that you can change the content of webpage when you are hovering over outside of webpage. But you can sacrifice right border via CSS to reduce the inconvenience

[perigozin]

The gap belongs to the browser frame, while the scrollbar belongs to webpage itselft. It doesn't make sence that you can change the content of webpage when you are hovering over outside of webpage. But you can sacrifice right border via CSS to reduce the inconvenience

It makes even less sense having a behavior that differs from any other software. Muscle memory is a thing and this is obviously an UX issue.

[Propheticus]

I can see how this is a UX issue for those that scroll by throwing the mouse far right and clicking.

As a workaround you can remove the 8px gaps by going into advanced preferences about:config and setting zen.theme.content-element-separation to 0

If it breaks it breaks, use at your own risk: CSS to only remove borders when window is maximised.

This goes into userChrome.css within the profile's chrome folder:

/* Remove padding around the window, but only when it is maximised */
:root[sizemode="maximized"] {
	--zen-element-separation: 0.1px !important;
}
/* Restore the split tabs draggable separator thickness */
#tabbrowser-tabbox:has(#tabbrowser-tabpanels[zen-split-view='true']) {
	--zen-element-separation: 8px !important;
}

[rstanuwijaya]

I agree that this is an UX issue.

I think the proper solution is to forward the mouse event (hover or click) from the right edge of the window to the rightmost pixel within the browser.

[mr-cheffy]

I think the proper solution is to forward the mouse event (hover or click) from the right edge of the window to the rightmost pixel within the browser.

That's easy on paper haha..

[rstanuwijaya]

Agreee... I cant think of any easy way to address this issue, seems like it's impossible to accomplish this with CSS alone right?

[rstanuwijaya]

Just thinking some ideas.. Can we add listener on the right padding, and use JS to simulate scrolling on the HTML element?

[perigozin]

Just thinking some ideas.. Can we add listener on the right padding, and use JS to simulate scrolling on the HTML element?

That was my initial idea, I don't dislike the right padding or the rounded corner, so the workaround to remove it completely isn't that appealing, and it breaks the design system. Adding a listener to the padding would solve this but someone mentioned it isn't part of the page itself so I don't know exactly how could this be implemented. Maybe some form of communication between the window and the page itself, passing the events to the scroll wheel.

[rstanuwijaya]

I tried to write a demo html for this idea. I think in principle it should be possible, the fake scrollbar can simulate scroll event to the page html.

https://codepen.io/rstanuwijaya/pen/NPPmBGW

But this approach may have some limitations:

• It can only scroll the outer HTML element. If the scrollable element is within another tag, it will be buggy.
• When the mouse cursor is on top of the original scroll bar, it may show double scrollbar.

[rstanuwijaya]

Hi @mauro-balades, I'm working on a fix for this issue, but I encounter a weird bug and need your advice.

My fix is to detect mouse event at the edge of the window, and send a message using browser.messageManager.sendAsyncMessage, and finally syntesize a mouse event with addMessageListener to execute:

    content.windowUtils.sendMouseEvent(
      data.type,      // e.g., "mousedown", "mousemove", "mouseup"
      data.clientX,   // X coordinate relative to the content window's viewport
      data.clientY,   // Y coordinate relative to the content window's viewport
      data.button,    // The button number (0 for left, 1 for middle, 2 for right)
      clickCount,     // Click count
      modifiers,      // Modifier keys
      false,          // aIgnoreRootScrollFrame (false means interact with page scroll)
      0.5,            // aPressure (0.5 is typical for mouse)
      Ci.nsIDOMWindowUtils.INPUT_SOURCE_MOUSE, // Input source
      false           // aIsSynthesized (false makes event.isTrusted = true)
    );

I tested it and it works on most websites, but somehow it doesnt work on Google and Youtube. Do you think it's because some website are able to block synthesized mouse event, i.e. for preventing bots?

[dosubot[bot]]

Hi, @perigozin. I'm Dosu, and I'm helping the desktop team manage their backlog. I'm marking this issue as stale.

Issue Summary:

• You reported a UX issue with the Zen browser on Windows regarding a gap between the scrollbar and window edge.
• "sporocyst" suggested CSS adjustments as a workaround.
• "Propheticus" provided a workaround using advanced preferences and CSS modifications.
• "rstanuwijaya" proposed using JavaScript to simulate scrolling and shared a demo on CodePen, but is facing issues with synthesized mouse events on certain websites.

Next Steps:

• Please let us know if this issue is still relevant to the latest version of the desktop repository by commenting here.
• If no updates are provided, the issue will be automatically closed in 7 days.

Thank you for your understanding and contribution!

[rstanuwijaya]

Can this reopened?

It's still relevant and I have some more time to contribute for this feature.

[wldd22]

Personally, I have a habit of moving the mouse to the right edge before scrolling normally incase I accidentally scroll a secondary scroll bar in the page. This bug has really been annoying me and I've been using content-element-seperation=0 to fix it (functionally, if not visually). It really detracts from the zen look, though.

[dosubot[bot]]

Hi, @perigozin. I'm Dosu, and I'm helping the desktop team manage their backlog and am marking this issue as stale.

Issue Summary:

• You reported a UX issue on Windows where a gap between the scrollbar and window edge prevents clicking the scrollbar by moving the mouse to the extreme right.
• Contributors suggested CSS workarounds and explored JavaScript solutions to forward mouse events, though some technical challenges remain.
• The issue was marked stale but later reopened due to ongoing relevance and user confirmations of the annoyance.
• The discussion focuses on finding a balance between UX consistency and technical constraints for seamless scrollbar interaction.

Next Steps:

• Please let me know if this issue is still relevant with the latest version of the desktop repository by commenting here to keep the discussion open.
• If I don’t hear back within 10 days, this issue will be automatically closed.

Thanks for your understanding and contribution!

[rstanuwijaya]

Still relevant, waiting for PR review in next step.

[jwbth]

My fix is to detect mouse event at the edge of the window, and send a message using browser.messageManager.sendAsyncMessage, and finally syntesize a mouse event with addMessageListener

Why is the right window border even needed? I believe it should just be removed so that the appearance matches the behavior. It's non-functional and doesn't really benefit the UX giving the vibes of an old TV.

(CC0)