"[Bug]: Issue with textarea blur when content is scrollable in Dialog Box"

[vipinWCA2]

Describe the bug

This issue arises when a textarea is placed inside a ShadCN dialog box. When the content within the textarea becomes scrollable, due to overflow, and a blur effect is applied to text

Affected component/components

Textarea

How to reproduce

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

Windows 10 Pro
Intel(R) Core(TM) i5-8400 CPU @ 2.80GHz   2.81 GHz

Google Chrome
Version 127.0.6533.120 (Official Build) (64-bit)

Before submitting

• [X] I've made research efforts and searched the documentation
• [X] I've searched for existing issues

[EL-MEHDI-ESSAADI]

Same issue here

[vipinWCA2]

I removed the transform property and used flex to center the div.

<div
    data-lenis-prevent
    className='fixed z-50 inset-0 flex items-center justify-center'
  >
    <DialogPrimitive.Content
      data-lenis-prevent
      onOpenAutoFocus={(e) => e.preventDefault()}
      ref={ref}
      className={cn(
        "relative grid grid-rows-[max-content] w-full sm:max-w-max  border-0 bg-background p-6 shadow-lg duration-200 sm:rounded-lg  gap-0 focus-visible:outline-none",
        className
      )}
      {...props}
    >
      {children}
    </DialogPrimitive.Content>
  </div>

[EL-MEHDI-ESSAADI]

I removed the rounded-md on the Textarea component which fixed the problem for me, it's weird

[Samuel-b-gipit]

The issue is the textarea doesn't give space to the scrollbar before it actually appears causing the content inside to resize which causes the blur rendering issue. You can add a css style on your textarea

scrollbar-gutter: stable;

which will make space for the scrollbar even before it appears making the content not resize. You can see this by verifying the padding for where the scrollbar will appear before and after adding the style. With this solution you can still keep your roundered corners.