Handle isn't exactly centred over the left hand pip on Safari/iOS

[langsharpe]

To reproduce:-

• Go to the Moving slider by clicking on pips example.
• Click on the 0 pip (or slide the handle all the way to the left)

If you look closely, the center of the handle is not directly over the pip. If you slide the handle over to the right-hand side the handle aligns perfectly with the pip for 100.

Safari 13.0.2 and Safari on iOS 9.0.3 and 13.1 and all have the issue. Chrome 78.0.3904.70 and Firefox 70 (both on OSX) don't have this issue.

I'm sorry to be so picky. I'm restyling the handle to be smaller and it is more noticeable in our application which is why I'm searching for a solution.

Thank you for all the work you have put into this library. Let me know if there is any way I can assist.

[leongersen]

This is related to this compositing issue.

noUiSlider uses CSS transforms to place its handles (rather than absolute positioning) for performance reasons. To translate the slider values to a position on the slider, a transform is used.

Because transforms are relative to an elements own size (not its parent), every noUi-origin element has a width of 10%. This way, a transform of translate(-800%, 0px); sets the handle at 20% of the slider.

I had originally hoped to use a width of 1% (and a 10x bigger translation value) for the origin elements, but that resulted in the bug you are seeing. The alternative was to go with a 100% width, but that has the side effect of having relatively large elements move around the screen and potentially increasing the document height on vertical sliders. See #987.

Unfortunately, the issue seems to have been fixed in Chrome, but not in Safari (yet).

[leongersen]

I've just released noUiSlider 15.0.0, which fixes this. I've added a (manual) test which helps demonstrate both this issue and #987. Thanks for contributing, @langsharpe!

[github-actions]

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.