Hidden checkbox input with position:absolute breaks Chrome

[marcnarc]

(Apologies that I don't have a convenient reproduction of this problem, I'm working with private code that I cannot share.)

The ui-helper-hidden-accessible class specifies position:absolute. When this applies to a checkbox <input>, Chrome suffers from what appears to be a long-standing side-effect, as described in this ancient StackOverflow question: If the checkbox is contained in a bunch of nested <div>s where one of the ancestors is vertically scrolled, when the checkbox is clicked the scrolled ancestor's top/y value is adjusted by the scrolled amount, causing the <div> to become clipped at the top. If there's enough scrolling, the <div> can disappear entirely.

This does not happen in Firefox.

To work around this, I set position:fixed explicitly on the checkbox <input>, overriding ui-helper-hidden-accessible's value.

I think jQueryUI should address this problem. I'm not sure if it's OK to change ui-helper-hidden-accessible's value for position, or if it should only be done for checkbox <input>s (or if there's a better way to deal with this).

[mgol]

Thanks for the report. Does the issue you describe exist when jQuery UI 1.12.1 is used or only with jQuery UI 1.13.0 or newer?

[marcnarc]

Thanks for the fast response!

1.12.1 also shows the problem.

I can show you some isolated screenshots of the issue.

Before clicking on a checkbox

After clicking 2nd-last checkbox

[mgol]

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 if they're not too complex and contain tests.

Also, it'd help if you could provide a runnable test case clearly showing the issue.

[marcnarc]

Thanks, I understand. Hopefully I can find some time to work on this.