1938489 - [REGRESSION] :checked pseudo-selector not working with dynamically inserted DOM elements

Status: RESOLVED FIXED

(Core :: DOM: Forms, defect)

Description

[mic.gallego]

Attachment: Firefox 119.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Steps to reproduce:

Hello,

We've started to have reports on our Shopify theme. Our CSS uses the :checked pseudo-selector to style a label. This works correctly when the DOM elements are in the initial page load, however the :checked selector stops working on elements dynamically inserted.

I've tried Browser Stack and the issue started to appear on Firefox 120 (so quite a long time ago, pretty surprised it did not get reported earlier). On versions prior it works correctly.

To reproduce the issue:

1. Open this page (make sure to include the query param): https://www.ibbq.com/?preview_theme_id=144316825757
2. For the product "Angara Maximus", click on "Choose options" to open the drawer.

Actual results:

Firefox (from version 120) does not match the :checked selector.

Expected results:

Firefox should match the selector.

Comment 1

[mic.gallego]

Attachment: Firefox 120 and higher.png

Comment 2

[Francesco Lodolo [:flod]]

Firefox (from version 120) does not match the :checked selector.

This is working fine for me on 135 (Nightly), and 128.5.3 (ESR), on macOS.

On which version and OS are you seeing the issue?

Comment 3

[mic.gallego]

Hi,

This is broken on Firefox 133 (I've tried on Firefox 134 Beta and it is broken as well), both on MacOS. Make sure to try the link I have given (https://www.ibbq.com/?preview_theme_id=144316825757).

Comment 4

[Francesco Lodolo [:flod]]

Attachment: Firefox 133 on macOS 15.1.1 (24B91)

Unless I'm missing something obvious, seems correct to me with Firefox 133 on macOS 15.1.1 (24B91).

Does the behavior change if you start Firefox in Troubleshoot mode?

Comment 5

[Francesco Lodolo [:flod]]

I think instructions to reproduce are incomplete.

https://www.ibbq.com/?preview_theme_id=144316825757 redirects me to https://www.ibbq.com/ (EDIT: although the page is different if I open the domain directly, so the URL might be misleading).
If I click on Angara Maximus, it opens https://www.ibbq.com/products/angara-maximus, which shows up correctly (previous screenshot).

I don't see the black border if I click on Quick view in the homepage, which opens a sidebar.

Comment 6

[Alice0775 White]

I can reproduce the issue on Nightly135.0a1 Windows11.
No border appears for the checked radio button.

Regression window:
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=0df79cc60ea0ef86258f3b33d533c75e91805d8b&tochange=16a3de29e4e69175f5a7c914ffa9de63b8683f2a

Regressed by: Bug 1685926

If Insert a form element encompassing the radio button elements and it will be rendered as expected.

Comment 7

[Francesco Lodolo [:flod]]

This is the regression range I got, unfortunately it's too old to get a smaller one
https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=7768cf51f090145a9009fb37298f3c1da7d60a2f&tochange=2c0444cfb7d60a431997df802f4075df11fd26b0

Steps:

1. Open https://www.ibbq.com/?preview_theme_id=144316825757
2. Click on QUICK VIEW in one of the items.
3. The buttons in the sidebar have a light gray background instead of black.

EDIT: never mind, Alice already identified bug 1685926, which is in the range.

Comment 8

[BugBot [:suhaib / :marco/ :calixte]]

:avandolder, since you are the author of the regressor, bug 1685926, could you take a look? Also, could you set the severity field?

For more information, please visit BugBot documentation.

Comment 9

[mic.gallego]

Thanks for tracking down this bug. Can we expect a fix on the next version of Firefox? This is a regression on an extremely basic web feature, and it is impacting all users of our themes.

Comment 10

[Edgar Chen [:edgar] (PTO until 02/09)]

I can also reproduce this issue with the STR in comment #5. It seems like the radio input isn’t being "checked" at all. I dumped the input’s checked state in the console using document.getElementById("option-template--18409551233181__main--7213974388893-1-2").checked, and it returned false. When I manually set the checked state in the console using document.getElementById("option-template--18409551233181__main--7213974388893-1-2").checked = true , the CSS updates correctly. This suggests that the issue is about the checked state not being updated correctly in certain cases.

Comment 11

[Edgar Chen [:edgar] (PTO until 02/09)]

Attachment: testcase.html

I found a minimal test to reproduce the issue.

Comment 12

[Edgar Chen [:edgar] (PTO until 02/09)]

So, it seems that appending a checked radio input into a disconnected tree doesn’t update the checked state for other elements in the same radio group. Oh ugh, if it is appended to a disconnected form, the checked state for other elements in the same radio group DOES update.

Comment 13

[Edgar Chen [:edgar] (PTO until 02/09)]

I filed https://github.com/whatwg/html/issues/10897 to make it clear in the spec.

Comment 14

[Edgar Chen [:edgar] (PTO until 02/09)]

Attachment: Bug 1938489 - Don’t update other radio inputs in the same radio group when a radio input is appended to a disconnected subtree;

See https://github.com/whatwg/html/issues/10897.

Comment 15

[Edgar Chen [:edgar] (PTO until 02/09)]

https://treeherder.mozilla.org/jobs?repo=try&revision=375cadb4ef243fe90a7436ed7392afb873fae533

Comment 16

[Edgar Chen [:edgar] (PTO until 02/09)]

The (In reply to mic.gallego from comment #0)

1. Open this page (make sure to include the query param): https://www.ibbq.com/?preview_theme_id=144316825757

Hi mic.gallego,
The link is no longer available, and I don’t see the same problem on other pages.
Has this issue been resolved on your side? Thanks!

Comment 17

[mic.gallego]

Hello,

No, the issue is not fixed. It is a Firefox bug so I can't resolve it on my end :). You can reproduce it here as well: https://focal-theme-carbon.myshopify.com/

On the first row of products, hover on one of the products, click on the "Quick view" button to open the quick view, and see how checked radio are not checked as none of them are matching :checked selector.

Comment 18

[mic.gallego]

Please find an attached video here: https://www.dropbox.com/s/re3d3mlnfko49i5/video.mov?dl=0

The first one shows Firefox (incorrect result), the second one shows Chrome (correct result).

Comment 19

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/855cfa4c4274
Don’t update other radio inputs in the same radio group when a radio input is appended to a disconnected subtree; r=avandolder

Comment 20

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/50048 for changes under testing/web-platform/tests

Comment 21

[Narcis Beleuzu [:NarcisB]]

https://hg.mozilla.org/mozilla-central/rev/855cfa4c4274

Comment 22

[mic.gallego]

Will this be backported to version 135?

Comment 23

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 24

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 25

[BugBot [:suhaib / :marco/ :calixte]]

The patch landed in nightly and beta is affected.
:edgar, is this bug important enough to require an uplift?

• If yes, please nominate the patch for beta approval.
• If no, please set status-firefox135 to wontfix.

For more information, please visit BugBot documentation.

Comment 26

[Edgar Chen [:edgar] (PTO until 02/09)]

Attachment: Bug 1938489 - Don’t update other radio inputs in the same radio group when a radio input is appended to a disconnected subtree;

See https://github.com/whatwg/html/issues/10897.

Original Revision: https://phabricator.services.mozilla.com/D233421

Comment 27

[Phabricator Automation]

beta Uplift Approval Request

• User impact if declined: Radio inputs don’t work on some pages that use the Shopify theme due to this behavioral differences we have compared to other browsers.
• Code covered by automated testing: yes
• Fix verified in Nightly: yes
• Needs manual QE test: no
• Steps to reproduce for manual QE testing: None
• Risk associated with taking this patch: Low
• Explanation of risk level: This only prevents the checkedness from updating when appending to a disconnected tree. There are many existing tests, and some new tests have also been added.
• String changes made/needed: None
• Is Android affected?: yes

Comment 28

[Pulsebot]

https://hg.mozilla.org/releases/mozilla-beta/rev/1298c813e245