$.position.scrollbarWidth() always gets zero when system theme has very wide scrollbars on Firefox

[Qi Fan]

Version: jquery-ui 1.12.1 Browser: Firefox 50. Not reproducible on IE or Chrome. OS: Windows 7. Xubuntu 16.04.1 LTS

Steps to reproduce: Windows 7:

1. In Windows control panel, open "Appearance and Personalization" -> "Personalization" -> "Window Color". Select "Item" to "Scrollbar". Set size to 45.
2. Open Firefox 50, load jquery and jquery-ui, access $.position.scrollbarWidth().
3. You get 0.

Xubuntu 16.04.1 LTS:

Use windows 7 steps 2 and 3.

Live demo: ​https://jsfiddle.net/w1Lgfs7v/

Expected Behaviour: $.position.scrollbarWidth() should return correct scrollbar width.

---

position.scrollbarWidth gets the scrollbar width by creating a hidden 50px by 50px element and fill it with large content.

On Firefox, when the scrollbar width is large and the element is small, all scrollbars become hidden.

Usually 50x50 div is enough for most default OS themes, but the default xubuntu (xfce) 16.04 theme has just enough scrollbar width to hide scrollbars in a 50x50 div.

I changed the dimensions of the hidden element to 100x100 for my own project to at least get correct scrollbar width for users running Xubuntu default theme, but this may not help if someone using Windows sets system scrollbar width to 100.

[Scott González]

Can you test this patch? ​https://github.com/jquery/jquery-ui/pull/1811

[Qi Fan]

@Scott:

I tried your patch on Windows 7 with OS scrollbars set to 45px. The fix works.

Test jsfiddle used: ​https://jsfiddle.net/uc5nb08d/1/

And, I just found that Windows 7 can only set scrollbar width to a maximum of 100, so your choice of using 200px element is enough.

[Scott González]

In efb1fee:

Position: Increase scrollbar test div to handle larger scrollbars

Fixes #15106
Closes gh-1811