angular / angular/components

bug(cdk/text-field/autosize): Scrollbar appears when line-height is a decimal and autosizing is enabled

Open
#32,178 0 comments 0 reactions 0 assignees View on GitHub
area: cdk/scrolling area: cdk/text-field P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

When using a `` with `cdkTextareaAutosize` and a **decimal numeric** `line-height` **value** (for example `1.15`), a vertical scrollbar appears even when the content fits perfectly within the view.
This happens despite autosizing being enabled, and the field should automatically expand to fit content without a scrollbar.

This issue does not occur when `line-height` **is an integer** (e.g. `1 or 2`).

**Technical Observation**
The browser appears to truncates decimal values internally (e.g. from `16.08 px` to `16 px`) when returning the clone's height to Angular.
As a result, when the text area expands to its autosized height (e.g. `4 lines`), the truncation introduces a small pixel mismatch, just enough to trigger a scrollbar.

**Possible solution:**
Angular CDK might need to account for fractional pixel rounding when computing `textarea` height.

### Reproduction

StackBlitz link: **https://stackblitz.com/edit/5xmbl7sj-53y6s3u8?file=src%2Fexample%2Ftext-field-autosize-textarea-example.html**
Steps to reproduce:
1. Open the StackBlitz link above
2. Set the browser zoom to `110%` **(important)**
3. Observe the `<textarea>` component with `cdkTextareaAutosize`
4. Notice the CSS rule applied
```css
textarea { line-height: 1.15 }
```
5. Fill in three lines of text, e.g. using
```
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
```
6. Add one more character (`a`),
-> A scroll bar appears even though the text area expands correctly

### Expected Behavior

The `textarea` should **never display a scrollbar** when autosizing is enabled, regardless of `line-height` precision.

It should fully expand to fit content, even when `line-height` includes decimal or sub-pixel values.

<img width="225" height="103" alt="Image" src="https://github.com/user-attachments/assets/ab6a2276-c076-40d0-a1a9-b19570e8edaf" />

### Actual Behavior

A vertical scrollbar appears after the text fills exactly three lines and one additional character is entered.

The scrollbar is triggered despite autosizing correctly adjusting the height.

<img width="225" height="103" alt="Image" src="https://github.com/user-attachments/assets/1d84ea7a-2b80-4232-be47-2b75b5bf8bf7" />

### Environment

- Angular: `20.2.4`
- CDK/Material: `20.2.2`
- Browser(s): `Edge (141.0.3537.85), Chrome (141.0.7390.108)` possibly more (tested on these)
- Operating System (e.g. Windows, macOS, Ubuntu): `Windows`

Contributor guide

Open the contributing guide

Research direction

Start with the StackBlitz reproduction, particularly src/example/text-field-autosize-textarea-example.html, and reproduce the issue at 110% browser zoom with cdkTextareaAutosize and line-height: 1.15. Trace the Angular CDK textarea autosizing behavior and verify that a four-line textarea with fractional line-height does not show a scrollbar after the extra character is entered.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.