search

alexkatz / react-tiny-popover

A simple and highly customizable popover react higher order component with no other dependencies! Typescript friendly.
MIT License
445 stars 119 forks source link

Fix blurry popover on non-retina displays #176

Closed D34THWINGS closed 1 year ago

D34THWINGS commented 1 year ago

When using popovers on a non-Retina/high pixel density screen, there are som situations where it becomes totally blurry due to calculations of positions returning decimal values for pixel position.

The worst case is when a .5px value is output where the effect is the worst because the browser will try to put it between the two pixel positions and anti-alias everything which will make it totally blurry like the exemple bellow:

Screenshot 2022-09-30 at 15 14 09

Plus the decimal of a pixel doesn't really make sense in general as it translates to a physical limitation of a pixel not being dividable. On Retina displays it works because each pixel is actually made of multiple pixels so you don't have to use anti-aliasing as much

So the fix is simple, just round the position 😛

Thank you for your work and maintaining the library!

D34THWINGS commented 1 year ago

@alexkatz any chance you can look at this? 🙏

jasonphillips commented 1 year ago

The sub-pixel effect can be very ugly on external monitors, so this PR is a quick fix worth merging.

jasonphillips commented 1 year ago

But I believe there is a second place that needs to be updated in the code to also apply rounding: https://github.com/alexkatz/react-tiny-popover/blob/5dff079894ef1991211f9228fd4fd9401fb41cde/src/usePopover.ts#L137-L139