Closed Bug 1655805 Opened 4 years ago Closed 4 years ago

Scrollbar does not fully appear

Categories

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

78 Branch
defect

Tracking

()

RESOLVED INVALID

People

(Reporter: ericgorr, Unassigned)

Details

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:78.0) Gecko/20100101 Firefox/78.0

Steps to reproduce:

Visit https://codepen.io/lookininward/pen/zYOQjZM

Reduce height of window so some content does not appear

Actual results:

The content area is scrollable, but a scrollbar does not appear.

Expected results:

A normal scrollbar should appear

Hi Eric,

I'm having trouble reproducing the issue you've described above on Firefox 79 or Firefox Nightly 81.0a1

Would you mind taking a screen recording or at least a screenshot of the issue you've described (when the issue occurs)?

Also, could you check if this happens when browsing in safe-mode? You can find out how to do this here:
https://support.mozilla.org/en-US/kb/troubleshoot-extensions-themes-to-fix-problems#w_start-firefox-in-safe-mode

Thanks!

Flags: needinfo?(ericgorr)

Here you go ... https://drive.google.com/file/d/1UbyRSqZYx1qlgWlL3P2fwu0qFa194apJ/view?usp=sharing

I won't keep this recording here for long, so please grab it if you want to keep it. It was unclear how I could attach it to this report.

There is a sliver of a scrollbar that appears, but it is not something that a user could grab or manipulate to scroll as one can with a regular scrollbar.

Safe Mode does not change behavior.

Flags: needinfo?(ericgorr)

Have you been able to reproduce the issue?

Have you been able to grab the video?

The scrollbar is thin but it is the same in Chrome and Safari so I don't think this issue is a Firefox issue.
Since the container width is set to: 100vw the scrollbar does not have the space to appear normally, if you reduce the width to 99vw
the scrollbar will appear normally.

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

In the testcase, .container is just too wide and leaves no space for the scrollbar. Note <body> tag has a default margin: 8px in Firefox and a similar value in other browsers. If you'd like to have the .container cover the entire screen via width: 100vw, set margin: 0 to <body>, the scrollbar should appear.

I'll close this bug. Feel free to let us know if the above suggestion works for you.

Status: UNCONFIRMED → RESOLVED
Closed: 4 years ago
Resolution: --- → INVALID

I still believe there is a bug here with the way the scrollbar is being treated. A scrollbar should be inside of the content area, covering the text while scrolling. The behavior here is for a scrollbar to remain outside of the content area. This is the way a typical macOS app behaves while scrolling.

But, perhaps there are cross-platform reasons for why it behaves the way that it does.

The scrollbar won't alter the size of a container. Take https://jsfiddle.net/fc20ypnq/ as an example. The container's size remains the same even if the scrollbars are there.

The typical scrollbar on macOS app is an "overlay" scrollbar where the scrollbar won't occupy the content area, and it can "overlay" on top of the text when scrolling the container. Other OS's scrollbar (or if you change the setting to always show scrollbars on macOS) can occupy the content space of a container.

In your testcase, the .container actually overflow <body>, but <body> is overflow: hidden, so no scrollbar is created. I guess it may look as if the .content's scrollbar is outside the content area.

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