#15106 closed bug (fixed)

Opened November 29, 2016 09:56PM UTC

Closed May 04, 2017 03:01PM UTC

Last modified May 04, 2017 03:01PM UTC

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

Reported by: qfan Owned by: scottgonzalez
Priority: minor Milestone: 1.12.2
Component: ui.position Version: 1.12.1
Keywords: Cc:
Blocked by: Blocking:
Description

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.

Attachments (0)
Change History (4)

Changed May 03, 2017 05:17PM UTC by scottgonzalez comment:1

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

Changed May 03, 2017 05:45PM UTC by qfan comment:2

@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.

Changed May 04, 2017 03:01PM UTC by scottgonzalez comment:3

owner: → scottgonzalez
resolution: → fixed
status: new → closed

In [changeset:"efb1fee02b53c8fc17c3ffe68162f51b583e75f0" efb1fee]:

#!CommitTicketReference repository="" revision="efb1fee02b53c8fc17c3ffe68162f51b583e75f0"
Position: Increase scrollbar test div to handle larger scrollbars

Fixes #15106
Closes gh-1811

Changed May 04, 2017 03:01PM UTC by scottgonzalez comment:4

milestone: none → 1.12.2