I’m experiencing a strange cursor behavior where clickable components don’t show a pointer cursor in certain areas, but the onClick functionality still works perfectly. This issue appears to be specific to the topmost component when multiple components are stacked. Critical Detail: The bug only occurs when Chrome is in full screen mode AND scaled (either via Cmd+ zoom or when browser font size is configured to be larger). When Chrome is scaled but not in full screen, everything works perfectly.
- Browser: Chrome on Mac ARM (everything latest)
- CSS Reset: Using modern-normalize v3.0.1 with custom reset via CSS @layer
- Framework: React with CSS Modules
- Trigger Condition: Issue only occurs when Chrome is both full screen AND scaled (Cmd+ or larger font configured)
What I’ve Tried
- Multiple Component Test: I placed multiple clickable components in the same position using absolute positioning
- Observation: Only the topmost component exhibits the cursor issue
- Functionality Check: Added onClick handler to the entire component - the click events fire correctly even in areas where the cursor doesn’t change to pointer
Expected Behavior
Hovering over clickable elements should show cursor: pointer. The pointer cursor should appear consistently across the entire clickable area.
Actual Behavior
- Some areas of the component show the default cursor instead of pointer
- Click functionality works everywhere, but cursor visual feedback is inconsistent
- Only affects the topmost component in a stack
function Sidebar({
isCollapsed,
currentOrganization,
organizations,
navLinks,
}: SidebarProps) {
return (
<div
className={`${styles.sidebar} ${isCollapsed ? styles.collapsed : styles.expanded}`}
data-collapsed={isCollapsed}
>
<SidebarHeader>
<SidebarButton variant="dropdown" size="lg" icon={HomeIcon}>
<span>Company</span>
<span>Starter</span>
</SidebarButton> // <-- Only this component has issues.
<SidebarButton variant="dropdown" size="lg" icon={HomeIcon}>
<span>Company</span>
<span>Starter</span>
</SidebarButton>
<SidebarButton variant="dropdown" size="lg" icon={HomeIcon}>
<span>Company</span>
<span>Starter</span>
</SidebarButton>
<SidebarButton variant="dropdown" size="lg" icon={HomeIcon}>
<span>Company</span>
<span>Starter</span>
</SidebarButton>
</SidebarHeader>
<SidebarContent>
<SidebarMenu>
<SidebarButton
variant="default"
size="md"
icon={LayoutPanelTopIcon}
>
<p>Dashboard</p>
</SidebarButton>
</SidebarMenu>
</SidebarContent>
</div>
);
}
Component itself:
function SidebarButton({
variant,
size,
children,
className,
icon: Icon,
}: CombinedSidebarButtonProps) {
switch (size) {
case "lg":
return (
<button
type="button"
className={clsx(
sidebarButtonVariants({ variant, size }),
styles.base,
className,
)}
>
<div className={styles.leftIconWrapper}>
<Avatar
contentType="icon"
size="md"
icon={HomeIcon}
variant="circular"
/>
</div>
<div className={styles.collapsibleWrapper}>
<div className={styles.textWrapper}>{children}</div>
<div className={styles.rightIconWrapper}>
<ChevronsUpDown />
</div>
</div>
</button>
);
case "md":
switch (variant) {
case "default":
return (
<button
type="button"
className={clsx(
sidebarButtonVariants({ variant, size }),
styles.base,
className,
)}
>
<div className={styles.leftIconWrapper}>
<Icon className={styles.leftIcon} />
</div>
</button>
);
}
}
return null;
}
It’s CSS:
.base {
display: flex;
align-items: center;
align-self: stretch;
background: var(--color-sidebarbutton-bg);
cursor: pointer;
overflow: hidden;
background: yellow;
.leftIconWrapper {
display: flex;
align-items: center;
background: blue;
.leftIcon {
width: 1rem;
height: 1rem;
}
}
.collapsibleWrapper {
width: 12rem;
display: flex;
align-items: center;
flex: 0 0 auto;
background: green;
.textWrapper {
display: flex;
padding: 0 0.5rem;
flex-direction: column;
align-items: flex-start;
flex: 1 0 0;
background: cyan;
cursor: pointer !important;
span {
font-size: 0.75rem;
line-height: 1rem;
}
span:nth-child(2) {
color: var(--color-text-placeholder);
background: red;
}
}
.rightIconWrapper {
display: flex;
padding: 0.5rem;
justify-content: center;
align-items: center;
svg {
width: 1rem;
height: 1rem;
}
}
}
&:hover {
background: var(--color-sidebarbutton-bg-hover);
}
}
.md {
padding: 0;
border-radius: 0.375rem;
.leftIconWrapper {
padding: 0.5rem;
}
}
.lg {
padding: 0.5rem;
}
Debugging Steps Taken
- Confirmed onClick works everywhere in the component
- Verified cursor: pointer is applied via dev tools
- Tested with cursor: pointer !important - no change
- Confirmed issue only affects topmost component in stack
- Tried removing CSS reset - issue persists
- Discovered issue only occurs in full screen + scaled Chrome
- Confirmed bug disappears when Chrome is windowed (even when still scaled)
- Not seeing this bug in Safari and Firefox under the same conditions
Questions
- Is this a known Chrome bug on Mac ARM? Specifically related to full screen mode with browser scaling?
- Why would scaling + full screen affect cursor rendering? The issue doesn’t occur in windowed mode with the same scaling
- Why would only the topmost component be affected? Lower components in the same stack work fine
- Could this be related to CSS reset/normalize interference?
- Any workarounds to force consistent cursor behavior in full screen scaled Chrome?