[BUG] - Slider Thumb Outline not centered graphically.

buchananwill commented 2 months ago

NextUI Version

2.3.0

Describe the bug

Outline around the thumb of the slider is not symmetrical - the number of pixels offset varies around the circumference. I'm assuming this is a bug rather than an aesthetic choice, because it doesn't vibe with the otherwise neat and professional look-and-feel. The photos are some cropped screen grabs. The asymmetry seems to vary depending on my browser's zoom setting. E.g. on the larger screenshot the bulge is to the top right, while the 100% zoom setting has a bulge to the bottom/bottom right.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

For me, the asymmetry is visible anywhere the slider is rendered (e.g. the homepage for NextUI: https://nextui.org/docs/components/slider)

Expected behavior

A symmetrical thumb outline.

Screenshots or Videos

slider off center

Operating System Version

Windows 10 Home V.22H2

Browser

Chrome

linear[bot] commented 2 months ago

ENG-762 [BUG] - Slider Thumb Outline not centered graphically.

wingkwong commented 2 months ago

I can reproduce this issue only when changing the zoom in browser but not using trackpad

arindam1997007 commented 1 week ago

Hi @buchananwill @wingkwong This issue arises due to subpixel rendering, which occurs at various zoom levels in the browser or at the monitor display settings, other than the default 100%. As shown in the image, the width and height are not integer values, causing the circle to be misaligned.

@wingkwong I think this can be solved using circle SVG instead of a div and pseudo-element. Can I give it a try?

wingkwong commented 1 week ago

@arindam1997007 Go ahead.

nextui-org / nextui