Opened 2 years ago

Closed 2 years ago

Last modified 2 years ago

#15106 closed bug (fixed)

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

Reported by: Qi Fan Owned by: Scott González
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.

Change History (4)

comment:1 Changed 2 years ago by Scott González

comment:2 Changed 2 years ago by 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.

comment:3 Changed 2 years ago by Scott González

Owner: set to Scott González
Resolution: fixed
Status: newclosed

In efb1fee:

Position: Increase scrollbar test div to handle larger scrollbars

Fixes #15106
Closes gh-1811

comment:4 Changed 2 years ago by Scott González

Milestone: none1.12.2
Note: See TracTickets for help on using tickets.