jquery / jquery-ui

The official jQuery user interface library.
https://jqueryui.com
Other
11.25k stars 5.32k forks source link

Datepicker positioning in Chrome inside Fixed element when font-size is not 12px...and more #2018

Open noyearzero opened 2 years ago

noyearzero commented 2 years ago

I've got a very specific bug that only happens when I have a datepicker in a position: fixed element and the html font-size is not set to 12px and the root scroll container is not scrolled to the top.

It happens in both 1.12.1 and 1.13.0.

I know it's a pretty specific issue that I'm not sure how easy it will be to reproduce. I'll try to set something up. But I'm hoping the symptoms might be enough for someone who knows the code.

In the meantime, is there a method that can be called to recalculate the position? Or is there an option that can be set to tie the position/scroll linkage to a certain parent (other than the root element? (sometimes scrolling the main window doesn't move the element the picker should be attached to, yet the picker scrolls).

mgol commented 2 years ago

Thanks for the report. Since the issue is already in 1.12, given limited team resources it's not likely to be fixed by the UI team; see the project status at https://blog.jqueryui.com/2021/10/jquery-maintainers-update-and-transition-jquery-ui-as-part-of-overall-modernization-efforts/. PRs are welcome, though.

lisanemari commented 2 years ago

Please unsubscribe me from your mailing list Thanks

On Tue 16 Nov 2021 at 16:17, noyearzero @.***> wrote:

I've got a very specific bug that only happens when I have a datepicker in a position: fixed element and the html font-size is not set to 12px and the root scroll container is not scrolled to the top.

  • It works correctly in other Chomium browsers like Edge.
  • It works if the font-size is exactly 12px.
  • It works if the element it is in anything other than a position: fixed element (such as position: sticky).
  • It works if you are scrolled to the top of the page.

It happens in both 1.12.1 and 1.13.0.

I know it's a pretty specific issue that I'm not sure how easy it will be to reproduce. I'll try to set something up. But I'm hoping the symptoms might be enough for someone who knows the code.

In the meantime, is there a method that can be called to recalculate the position? Or is there an option that can be set to tie the position/scroll linkage to a certain parent (other than the root element? (sometimes scrolling the main window doesn't move the element the picker should be attached to, yet the picker scrolls).

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/jquery/jquery-ui/issues/2018, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAPEPTGBN53E6C5LY3LYM7DUMJ72FANCNFSM5IEVS3RQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

janis-ps commented 2 years ago

@noyearzero

Hi, can you confirm if this patch helps? https://github.com/jquery/jquery-ui/issues/2017

noyearzero commented 2 years ago

@janis-ps Yes! that does fix it. As C-3PO would say... Wonderful!

mgol commented 2 years ago

If you'd like to turn the suggestion from #2017 into a PR, that'd be great.

However, while that fix looks close to being fine, using Math.floor is not the correct solution. The issue is caused by jQuery now returning floating point numbers in some cases. To compare such numbers, you shouldn't just round them as they may always be close to each other but on a different side of an integer. Instead, a small epsilon value should be determined and the check should be whether the difference between those two is smaller than this epsilon.

Note that any PR should come with tests.

Minor editorial changes applied

SailorMax commented 2 years ago

possible fix is here: https://github.com/jquery/jquery-ui/pull/2057