ScrollArea --radix-scroll-area-corner-width/height never reset to zero

jamiebuilds-signal commented 1 year ago

Bug report

Current Behavior

When changing the height and size of the scroll container, making either the vertical or horizontal scrollbars appear and disappear. The --radix-scroll-area-corner-width/height custom properties should be flipping back to 0 after one of the scrollbars appear

Expected behavior

Right now if both scrollbars are ever visible, the --radix-scroll-area-corner-width/height custom properties will stick around (ex. 8px) forever.

Reproducible example

https://codesandbox.io/s/radix-scrollarea-bug-corner-css-custom-props-jv84rh

Additional context

Your environment

You can see this in the latest version of @radix-ui/react-scroll-area in the code example.

Software	Name(s)	Version
Radix Package(s)
React	n/a
Browser
Assistive tech
Node	n/a
npm/yarn
Operating System

ImanMahmoudinasab commented 4 months ago

I have the same issue. No update/workaround?

ImanMahmoudinasab commented 4 months ago

Okay, I figured out how to fix the issue using pure css: I check if the vertical scrollbar doesn't exist then reset --radix-scroll-area-corner-width to 0 and the same way for the horizontal scrollbar. If you are using tailwind you need to add these class names to the Scroll Area Root element:

<ScrollAreaPrimitive.Root
      className={cn(
        // The following two lines fix this radix issue: https://github.com/radix-ui/primitives/issues/2383
        "[&:not(:has(>[data-orientation='vertical']))]:[--radix-scroll-area-corner-width:0_!important]",
        "[&:not(:has(>[data-orientation='horizontal']))]:[--radix-scroll-area-corner-height:0_!important]",
        className
      )}
      {...restProps}
    >

radix-ui / primitives