1472962 - responsive design mode : scrollbar too narrow if the simulated client is a PC

Status: NEW

(DevTools :: Responsive Design Mode, defect, P5)

Description

[Xavier OTTOLINI]

Attachment: Capture d’écran - 2018-07-03 à 11.58.30.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:60.0) Gecko/20100101 Firefox/60.0
Build ID: 20180605171542

Steps to reproduce:

1) I open the responsible design mode.
2) I enter a customize screen width (1280 x 566). This screen size corresponds to a 13' laptop screen.
3) I go to a page which needs a scrollbar (ex : https://bugzilla.mozilla.org/buglist.cgi?quicksearch=responsive%20design%20mode&list_id=14216762).




Actual results:

The scrollbar width is not the standard Windows (on PC) scrollbar width. On a PC, a scrollbar width is 17px.
The problem is that for very accurate table width, a few pixels difference are importants to display some unwanted horizontal scrollbars.


Expected results:

It should be possible to select the terminal OS (windows/PC , android, iOS, MacOS) ans the scrollbars width should fit the target terminal OS.

Comment 1

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

Thanks for the report!  I agree it would a nice enhancement to allow control of fixed vs. overlay scrollbars depending on whether you are simulating desktop vs. mobile.

Comment 2

[Florens Verschelde :fvsch]

At least some desktops have floating scrollbars: all mac0S, Chrome OS (it's also a flag in Chrome), some Linux versions, etc.
Linux scrollbars can have widely varying widths (from 24px to 6px, roughly, or 0px if it's a floating scrollbar).

So only the "Windows" and "macOS" options would be predictable... unless either Windows or Edge or Chrome on Windows switches to floating scrollbars, of course. Not worth adding complexity to the custom device setup, IMO. So I would wontfix this.

(Generally speaking, an underestimated part of responsive design is that you should not expect a 1280x768 screen to give you 768px of viewport height, like you showed with your 566px custom height, or expect to get the full 1280px as viewport width: there can be a scrollbar, but also the user may have decided to put their task bar or dock on the left or right side of the screen, eating up something like 60-100 pixels. Design for 1100px or 1200px of available width at most, and smoothly adapt to smaller widths.)