Problem I'm encountering an issue in Chrome on Mac (Apple Silicon) where the cursor: pointer does not appear over certain clickable components when the browser is in fullscreen mode and zoomed in (via Cmd+ or increased font size in settings). However, the onClick handlers still work, meaning the element is functional — just missing the pointer cursor.
When It Happens Only in Chrome (latest version)
Only on Mac ARM (M1/M2)
Only in fullscreen mode with scaling/zoom applied
Works fine in:
Windowed Chrome (even when zoomed)
Safari and Firefox
All other components except the topmost stacked one
Tech Stack React with CSS Modules
CSS Reset using modern-normalize v3.0.1 with custom overrides
Using @layer in CSS
Absolute positioning used to stack components
What I’ve Tried Verified cursor: pointer is applied (including !important) in all relevant CSS rules
onClick still fires correctly
Removed CSS reset — no change
Added multiple components in the same location — only the topmost one shows the issue
Confirmed the bug disappears when:
Exiting fullscreen
Resetting browser zoom to 100%