1911253 - qq.com - Check boxes are missing from the login window

Status: NEW

(Web Compatibility :: Site Reports, defect, P2)

Description

[Calin Tanase (OOO until 22nd of Nov)]

Attachment: FF vs Chrome.png

Environment:
Operating system: Windows 10
Firefox version: Nightly 130.0a1 (2024-08-01)

Steps to reproduce:

1. Go to https://www.qq.com
2. Click on the login button "登录" located on the top right side of the page.
3. Check the "同意《腾讯新闻软件许可协议》和《隐私条款》" box at the bottom of the window.
4. Click on QQ option.
5. Wait for it to load and observe the right side of the window.

Expected Behavior:
The checkboxes are displayed.

Actual Behavior:
The checkboxes are missing.

Notes:

1. Screenshot attached
2. Reproducible regardless of the ETP status
3. Reproducible on Firefox Release as well
4. Not reproducible on Chrome
5. Issue found during WebCompat team [Top100] websites testing

Comment 1

[Jeff Muizelaar [:jrmuizel]]

Attachment: Checkboxes in FF

I get checkboxes in FF nightly on mac. Calin, can you check that you can still reproduce this?

Comment 2

[Calin Tanase (OOO until 22nd of Nov)]

Attachment: qq.com FF vs Chrome.mp4

Yes, the issue is still reproducible on Windows 10 on the latest Nightly (132.0a1 (2024-09-05)). I think you stopped at step 3, you'll have to select the QQ option.

Comment 3

[Jeff Muizelaar [:jrmuizel]]

Attachment: Standalone test case

Comment 4

[Jeff Muizelaar [:jrmuizel]]

Attachment: Reduced test case

It looks like this is caused by:

li input[type=checkbox]{
visibility:hidden;
}
li input[type="checkbox"]:after{
content:" ";
visibility:visible;
visibility:hidden\9;
}

Chrome interprets this as visibility:visible and we interpret it as visibility:hidden

Comment 5

[Emilio Cobos Álvarez (:emilio)]

That's a red herring. The issue is that we don't generate the :after pseudo-element, because <input> is a replaced element. That's per spec.

I just filed https://issues.chromium.org/issues/365052666 for this.

It worked in old IE because of the visible\9 hack. The site can fix this by using appearance: none which forces the checkbox to be a non-replaced element:

.accredit_info_op li input[type="checkbox"] { appearance: none }

Do we have contacts there?

Comment 6

[Jeff Muizelaar [:jrmuizel]]

Looks like Safari has the same issue.

Comment 7

[Emilio Cobos Álvarez (:emilio)]

The same issue as Firefox, or the same issue as Chrome? :)

Comment 8

[Jeff Muizelaar [:jrmuizel]]

Safari has the same behaviour as Chrome