question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Incorrect measureScrollbar values on 1 of 5 computers running Chrome

See original GitHub issue

On 20% of the Computers I tried and only on Chrome (however when they have the problem, they always have it, like my laptop always have the problem but my desktop is ok), the horizontal scrollbar shows up after calling autosizeColumns() method. This bothered me for a while, and I just found the cause, it seems that the measureScrollbar() method is 3px short on these 20% of the computers and that makes the horizontal scrollbar appearing.

Some solutions I tried running this Vanilla JS measureScrollbar or even this other one for jQuery and they both return me the correct value which is 17px, but SlickGrid tells me it’s 14px (always 3px short) and then the horizontal scrollbar shows up.

I can create a PR, but I would like some feedback before doing so.

In the mean time, I will make an extra resize of the ViewPort with 3px to get rid of this annoying scroll bar (which again is only on 20% of the computers I’ve tried).

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:13 (7 by maintainers)

github_iconTop GitHub Comments

1reaction
6paccommented, Mar 24, 2020

The problem is solved, so no more action is necessary.

Just thinking if you were curious to see why this happened, you’d need to make the two divs visible and look at them with the inspection tools to see why the result is coming out as it is. You could do this if you make the offset small, the elements visible and don’t remove them after the test.

0reactions
ghiscodingcommented, Mar 24, 2020

I’m not sure why the viewport is in there at all, is it to calculate the scrollbar only when the viewport needs it? Even if that is the case, its calculation is will still be wrong unless it’s calculated with the body which was the PR you merged.

So anyway, I tried your suggestion to make the -10000px lower to -10px but that has no effect, let me know if there’s anything else you want me to try, as I said it always reproduce on my laptop (until I changed to body which fixed the issue).

If you want to see what it does on my laptop, see the animated gif below.

The best code that I’ve found on the internet to calculate the scrollbar thickness is the following

/** Get the browser's scrollbar width, this is different to each browser */
export function getScrollBarWidth() {
  const $outer = $('<div>').css({ visibility: 'hidden', width: 100, overflow: 'scroll' }).appendTo('body');
  const widthWithScroll = $('<div>').css({ width: '100%' }).appendTo($outer).outerWidth();
  $outer.remove();
  return Math.ceil(100 - widthWithScroll);
}

Compare it to SlickGrid measureScrollbar

function measureScrollbar() {
    var $outerdiv = $('<div class="' + $viewport.className + '" style="position:absolute; top:-10000px; left:-10px; overflow:auto; width:100px; height:100px;"></div>').appendTo($viewport);
    var $innerdiv = $('<div style="width:200px; height:200px; overflow:auto;"></div>').appendTo($outerdiv);
    var dim = {
      width: $outerdiv[0].offsetWidth - $outerdiv[0].clientWidth,
      height: $outerdiv[0].offsetHeight - $outerdiv[0].clientHeight
    };
    $innerdiv.remove();
    $outerdiv.remove();
    return dim;
}

r9s4Ivi1DM

Read more comments on GitHub >

github_iconTop Results From Across the Web

View a device's current Chrome policies - Google Support
Applies to managed Chrome browsers and ChromeOS devices. Want to remotely set policies for ChromeOS ... Check the Show policies with no value...
Read more >
Chrome Browser Privacy Policy - Google
Managing users in Chrome; Safe Browsing practices; Privacy practices of using apps, extensions, themes, services, and other add-ons; More ...
Read more >
Chrome Remote Desktop
The easy way to remotely connect with your home or work computer, or share your screen with others. Securely access your computer whenever...
Read more >
Chromebook Review — The Key Pros and Cons in 2022
Should you buy a Chromebook? This Chromebook review explores the pros and cons of using Chromebooks and other Chrome OS-based computers.
Read more >
Network+ 8th edition, Chapter 1 review questions - Quizlet
Study with Quizlet and memorize flashcards containing terms like c. HTTP, b. ... A network consists of five computers, all running Windows 10...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found