Scrollbar cursor behind row header (only with Firefox macOS)

Tags: #<Tag:0x00007f51b8cd2e98>
#1

Hi,

I have issues with vertical scrollbar cursor.

The scrollbar cursor is sometimes behind the header and it’s hard or impossible to grab it.
AFAIK it happens only on Firefox (v59 64b) running on macOS, see images below.

Also tested, but no issues, with Safari (v11.1) & Chrome (v66) on macOS and under Windows 7 with IE 11 & Firefox v59 & Chrome.

This problem can be reproduced with Handsontable fiddle “complete guide to changing size”: fiddle

Does someone have a fix for this ?

Here Firefox v59, macOS:

Same hot displayed on Safari (v11.1) macOS is fine:

#2

Hi @olivier

for Mac devices this scroll settings are set in the device itself.

Screen Shot 2018-03-27 at 14.38.17.png1320×588 55.7 KB

Please check your Show scroll bars option.

#3

Hi @aleksandra_budnik,

My scrollbars are set correctly.
The problem is not that the scrollbar is constantly visible or not, it’s the scrollbar position (z-index ?).

If you look at my first message attached screenshots you’ll see that, on the same Mac:

  • when scrolling is “when scrolling”, the “cursor” of the scrollbar is behind the column header with Firefox and in front of the column header with Safari.
  • when scrolling is “always”, the cursor is behind in Firefox and Safari
    as here:

The problem with the cursor behind the column header is that for tables with a lot of records the cursor is smaller and it’s impossible to grab it.

You’re right saying that the fiddle doesn’t illustrate the problem, I can’t get it “wrong” anymore …

But, within my application, it’s still displayed as on the screen shots.

Is there a way to have the scrollbar “top” position being the “top” of the first row and not the top of the column header ? That would solve my problem…

If not, I’ll dig deeper and play with the hot element and his container settings to see if I can solve this.

Thanks,

#4

I’m currently using Windows (here it all looks the same with scroll on top) so it’s hard to test but you can try to lower z-index of the Handsontable header. It’s thead CSS element.

#5

Hi @aleksandra_budnik,

I tried changing the z-index of thead but it doesn’t solve my problem and creates other issues.

I think I found something. It could be related to the z-index of the element containing the handsontable element.

Here is a fiddle which illustrate the problem with the scrollbar.
This problem is with Firefox on macOS only.

To reproduce, first set your macOS settings for scrolling to “when scrolling”.
Then load the fiddle and look at the vertical scrollbar cursor.

On my Max (macOS 10.13.4, Firefox 59.0.2 (64-bit)) the cursor is behind the header.

Thanks,

#6

Thank you for investigating this topic @olivier

I will ask our developers to check it on Mac as I do not have this ability right now.

#7

Sorry for keeping you waiting. I was not able to replicate it on Mac PRO (Sierra) on one device but will ask the team to check and share their feedback.

#8

Hi @olivier

our developer spend a half of the day looking for a solid solution but not only we are looking for one. (src: https://www.codeproject.com/Questions/1096212/Change-scrollbar-width-of-mozilla-firefox-browser) It looks like the Firefox doesnt want us to manipulate with the settings.

#9

Hi @aleksandra_budnik,

Thanks for looking at this problem and for keeping me informed.
I still hope you’ll find a solution but will survive without it.

Best regards,

#10