2 scrollers appear

[trandaison]

When using the trackpad, there're 2 scrollers. This doesn't happen when I plug a mouse.

!

Here're my HTML and CSS:

<div class="vuebar-element">
  <div>
    <!-- content here -->
  </div>
</div>

  .vuebar-element {
    height: 250px;
    width: 100%;
  }

  .vb > .vb-dragger {
      z-index: 5;
      width: 12px;
      right: 0;
  }

  .vb > .vb-dragger > .vb-dragger-styler {
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -webkit-transform: rotate3d(0,0,0,0);
      transform: rotate3d(0,0,0,0);
      -webkit-transition:
          background-color 100ms ease-out,
          margin 100ms ease-out,
          height 100ms ease-out;
      transition:
          background-color 100ms ease-out,
          margin 100ms ease-out,
          height 100ms ease-out;
      background-color: rgba(156, 39, 176, .0);
      margin: 5px 5px 5px 0;
      border-radius: 20px;
      height: calc(100% - 10px);
      display: block;
  }

  .vb.vb-scrolling-phantom > .vb-dragger > .vb-dragger-styler {
      background-color: rgba(156, 39, 176, .3);
  }

  .vb > .vb-dragger:hover > .vb-dragger-styler {
      background-color: rgba(156, 39, 176, .5);
      margin: 0px;
      height: 100%;
  }

  .vb.vb-dragging > .vb-dragger > .vb-dragger-styler {
      background-color: rgba(156, 39, 176, .5);
      margin: 0px;
      height: 100%;
  }

  .vb.vb-dragging-phantom > .vb-dragger > .vb-dragger-styler {
      background-color: rgba(156, 39, 176, .5);
  }

  .vuebar-element:hover {
    .vb-dragger-styler {
        background-color: rgba(156, 39, 176, .3);
    }
  }

[acupofspirt]

<style>
  ::-webkit-scrollbar {
    display: none;
  }
</style>

as a temp workaround

[goors]

same here

[DominikSerafin]

Hi @trandaison @acupofspirt @goors could anyone of you provide minimal repro (on JSFiddle, CodeSandbox, or similar), so I can look into this issue? Thanks!

[trandaison]

Hi @DominikSerafin,

This appear sometimes, and on some pc.
Suppose I can provide on jsfiddle, it doesn't make sure that this will happen on your browser 😂

[DominikSerafin]

@trandaison minimal repro on jsfiddle would be awesome. On which OSes/browsers does it happen?

[wrabit]

MBP 12, latest stable chrome, touchpad scrolling

[DominikSerafin]

Hey @williamabbott thanks for the image and info. GGather uses older version of Vuebar (0.0.18) - I didn't have yet chance to update. Have you seen this behavior with the newer versions of Vuebar?

[wrabit]

Oh ok, no I haven't even used it yet. This was the first hurdle. Sent from mobile On Thu, Feb 21, 2019 at 7:00 PM +0100, "Dominik Serafin" <[email protected]> wrote: Hey @williamabbott thanks for the image and info. GGather uses older version of Vuebar (0.0.18), didn't have yet chance to update. Have you seen this behavior with the newer versions of Vuebar? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[s0updev]

Got the same problem but with a mouse in latest Chrome\Opera on MacOS, as the tester reported.
And the text inside the container was moved when the second scrollbar appeared.

Vuebar version is 0.0.20

It helped:

.vb > .vb-content::-webkit-scrollbar {
    -webkit-appearance: none;
}

[0xradical]

Hi @DominikSerafin I was able to come up with a minimal repro ... here's the fiddle: https://jsfiddle.net/thiagobrandam/tfhnygcj/26/

It seems that a position: relative in child elements causes chrome and possibly other browsers to add a scrollbar. I still don't understand why though but will take a look and maybe come up with a fix. Just posting in case you might know right away the problem ...