Scrollbar does not fully appear
Categories
(Core :: Layout: Scrolling and Overflow, defect)
Tracking
()
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
Comment 1•4 years ago
|
||
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!
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.
Have you been able to reproduce the issue?
Have you been able to grab the video?
Comment 4•4 years ago
•
|
||
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.
Comment 5•4 years ago
|
||
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.
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.
Comment 7•4 years ago
|
||
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.
Description
•