search

ycs77 / headlessui-float

Easily use Headless UI with Floating UI to position floating elements.
https://headlessui-float.vercel.app
MIT License
349 stars 13 forks source link

fix: blurry text on browser zoom #54

Closed ayoung19 closed 1 year ago

ayoung19 commented 1 year ago

If you zoom out in the browser on some devices, floating items are blurred.

description of the issue: https://github.com/floating-ui/floating-ui/issues/779

mention of blurriness in floating-ui docs: https://floating-ui.com/docs/misc#subpixel-and-accelerated-positioning

x and y can contain fractional numbers (decimal), so there will be blurring unless we place it evenly on the device’s pixel grid. The rounding method above ensures the floating element is positioned optimally for the screen.

fixing with basic floating-ui example: https://floating-ui.com/docs/react#positioning

ycs77 commented 1 year ago

@ayoung19 Thanks for the PR, but to achieve the desired effect, you can use transform={false} instead, the transform prop allows users to choose their preferred positioning method (transform or top/left) (see: https://headlessui-float.vercel.app/react/other-options.html#position-mode), so I will close this PR for now 😅.

ayoung19 commented 1 year ago

ah got it, totally missed that option. i think the default should be false because if we want the normal correct behavior we have to put transform={false} everywhere and it's not really clear that the reason for that is to make it not blurry

ycs77 commented 1 year ago

OK, I'll do some research to see if this adjustment is a breaking change.