bug(mat-checkbox): Checkbox not rendered in multi-column layout on Chrome (Version 103.0.5060.53 (Official Build) (64-bit))

[kathrinkuenzli]

Description

In multi-column layout, using an unordered list, the mat-checkbox is no longer rendered/visible on Chrome Browser.

The Bug maybe relates to #19089

Reproduction

https://stackblitz.com/edit/angular-dcfswq-yfp4aw?file=src/app/checkbox-overview-example.css

Steps to reproduce:

1. Create an unordered list with each checkbox being wrapped by a list item tag
2. Set column-count: 2; on the unordered list
3. Open Page in Chrome Version 103.0.5060.53

Expected Behavior

All Checkboxes are visible and selectable.

Actual Behavior

Starting with the Second Row the Checkboxes are no longer visible. If I click on the Position of the last Checkbox ('Warn'), the first Checkbox gets selected (Primary).

Environment

• Angular: 14, 12.2.13
• CDK/Material:14.0.3, 12.2.13
• Browser(s):Version 103.0.5060.53 (Official Build) (64-bit)
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[amysorto]

I am also able to reproduce this on a Window machine

[crisbeto]

This is definitely some sort of browser bug, because adding .mat-checkbox { transform: translateZ(0); } fixes it.

[pedroestabruxelles]

@crisbeto position: relative on the same class also fixes the problem