search

omgovich / react-colorful

🎨 A tiny (2,8 KB) color picker component for React and Preact apps
https://omgovich.github.io/react-colorful
MIT License
3.19k stars 100 forks source link

Fixed pointer fill not being aligned in the center #175

Open Specy opened 2 years ago

Specy commented 2 years ago

Previously the fill thumb was not perfectly aligned to the center, i switched to flexbox to align it correctly. I've applied this fix to my website and thought to share here too so that it can be fixed for everyone.

Previous: image

After: image

omgovich commented 2 years ago

Hi @Specy! Thanks for the PR. How to catch the alignment bug? I saw that just once when used the browser zoom.

Specy commented 2 years ago

Hi @Specy! Thanks for the PR. How to catch the alignment bug? I saw that just once when used the browser zoom.

I see it everytime i enter the preview website, i'm using chrome 103 but had this issue for long. On firefox i can't reproduce. The fix i made works for all major browsers (not sure about IE but should work too)

omgovich commented 2 years ago

That's kinda weird. Are you sure you don't have zoom in your browser? I'm just trying to figure out the reason.

Specy commented 2 years ago

No i don't have any zoom on my browser, I think the issue is with the border, i've had issues in the past where borders caused the size calculations to be a bit messed up. An alternative to my fix which doesn't use flexbox is to use outline instead of border, because that doesn't change the sizing of the element, at that point the html can be simplified a bit too, and reduce the size of the package a little bit. Up to you which one you prefer, i can make the changes

omgovich commented 2 years ago

As far as I remember outline didn't work well with border-radius until recently.

Specy commented 2 years ago

Then i guess using flexbox would be the best approach