jquery-ui icon indicating copy to clipboard operation
jquery-ui copied to clipboard

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

Open noyearzero opened this issue 3 years ago • 6 comments

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).

noyearzero avatar Nov 16 '21 16:11 noyearzero

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.

mgol avatar Nov 18 '21 18:11 mgol

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.

lisanemari avatar Nov 18 '21 23:11 lisanemari

@noyearzero

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

janis-ps avatar Nov 22 '21 10:11 janis-ps

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

noyearzero avatar Nov 22 '21 17:11 noyearzero

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

mgol avatar Nov 24 '21 14:11 mgol

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

SailorMax avatar Mar 04 '22 10:03 SailorMax