angular / angular/components

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

オープン
#32,178 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る
area: cdk/scrolling area: cdk/text-field P3
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
91

説明

### 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`

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

StackBlitz の再現、特に src/example/text-field-autosize-textarea-example.html から始め、cdkTextareaAutosize と line-height: 1.15 を使用して、ブラウザのズームを 110% にしたときの問題を再現します。Angular CDK の textarea の自動サイズ調整の動作を追跡し、小数の line-height を持つ 4 行の textarea に追加の文字を入力した後、スクロールバーが表示されないことを確認します。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
frontend
issue の種類
バグ
難易度
3/5
見積もり時間
1〜2日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
45/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。