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

Issue Description

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:
Created 5 years ago
Comments:13 (7 by maintainers)

Top 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