angular / angular/components

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

未关闭
#32,178 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
area: cdk/scrolling area: cdk/text-field P3
主要语言
TypeScript
星标
25k
派生
6.8k
平均合并
1 天 8 小时
30 天内合并 PR
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,并在浏览器缩放比例为 110%、使用 cdkTextareaAutosize 和 line-height: 1.15 的情况下复现该问题。跟踪 Angular CDK textarea 自动调整大小的行为,并验证具有小数 line-height 的四行 textarea 在输入额外字符后不会显示滚动条。

由索引模型根据 Issue 内容生成。

评估

技术栈
angular, typescript
领域
frontend
Issue 类型
缺陷
难度
3/5
预计耗时
1-2 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
45/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。