autoresizeTextarea computes incorrect height in some cases

[Diggsey]

🐛 Bug report

Logical integer border widths may translate to fractional physical pixel widths due to DPI scaling. Browsers try to mitigate this by rounding the border width to an integer number of physical pixels. This means the following calculation is incorrect:

const borderTopWidth = parseInt(style.borderTopWidth, 10)
const borderBottomWidth = parseInt(style.borderBottomWidth, 10)
el.style.height = `${el.scrollHeight + borderTopWidth + borderBottomWidth}px`

This results in unwanted scrollbars on the textarea, because it's 1 pixel too short.

💥 Steps to reproduce

Use the auto-resizing textarea on a high-DPI display in Firefox.

CodeSandbox reproduction: https://www.chakra-ui.com/docs/components/textarea#autoresize

🧐 Expected behavior

The textarea should not have scrollbars.

🧭 Possible Solution

Compute an accurate height, or err on the large side.

🌍 System information

Software	Version(s)
Zag Version	all
Browser	Firefox
Operating System	Windows 10

📝 Additional information

[segunadebayo]

I just pushed a fix for this. We'll release an update shortly.

If the issue persists after upgrading, I'll re-open it.