When a horizontal slider's width is relative, all handles misalign on resize

[Roye7777777]

Greetings! Given a full-width slider in Safari with the handle set to the start/left: when I slowly start to resize, one notices that the handle starts to 'vibrate', or more concretely described: it starts to visibly variatingly offset horizontally from the center of the end of the coloured connect-line he handle is supposed to align onto. The handle moves from the left to the right, to the left, to the right etc. while resizing constantly. On reload, any misaligning due to this, persists. This issue appears in the latest versions of Chrome and Firefox as well, though almost negligible.

This behaviour appears at the condition that the slider does not have a fixed width (thus having a container width of e.g. 100%). The issue does not appear when the handle is at the end/on the right.

I was able to replicate it on the demo on the homepage: https://refreshless.com/nouislider/ (here I just removed the max-width from .quick .noUi-target) and I created a separate demo that simply shows a slider with a full width: https://codepen.io/roye7777777/pen/ZEKdXvy

This is an annoying quirk/bug in the scenario when one makes the handles smaller and tries to re-align the handles to keep them entirely visible when having to deal with an overflow: hidden. This then causes the handle - to emphasize: when on the very left - to seemingly randomly not be entirely visible (cut off) in various viewport-sizes. When the handle's the right, as I wrote before, there are no visual issues. Is there any suspect of what might cause this?

[Roye7777777]

Perhaps interesting for anyone who reads and experiences a similar issue: if one uses a range, one might use an ugly work-around to tackle this issue for now:

  #sliderId .noUi-origin:nth-child(2)[style="transform: translate(-1000%, 0px); z-index: 5;"] {
      transform: none !important;
      left: 0;
      /* Set half the width of the handle here too */
  }

  #sliderId .noUi-origin:last-child[style="transform: translate(0%, 0px); z-index: 4;"] .noUi-handle {
      right: 0px;
  }

[leongersen]

I'm not entirely sure what's happening here by your description alone; specifically, what do you mean by "resize"?

Given your suggestions on changing the transform styling; are you running into #1029?

[Roye7777777]

@leongersen Apologies for not replying for a while. I have made a screencast of what I see: https://youtu.be/a7RE-0zJskU With resize I mean browser window resize. It maybe partially has got something to do with #1029 , as it is a centering issue. This however only occurs at certain browser window widths.

[leongersen]

Looking at your screen capture, I'm fairly sure this relates to #1029. I'll see if there's a solution for #987 that avoids this issue.

[leongersen]

I've just released noUiSlider 15.0.0, which fixes #1029 and should fix this, though it is rather hard to verify this in Browserstack due to the latency. I've added a (manual) test which helps demonstrate both #1029 and #987. Thanks for contributing, @Roye7777777!

[github-actions[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.