bug(cdk/text-field/autosize): Scrollbar appears when line-height is a decimal and autosizing is enabled
- Ngôn ngữ chính
- TypeScript
- Star
- 25k
- Fork
- 6.8k
- Merge trung bình
- 1 ngày 8 giờ
- Pull request đã merge (30 ngày)
- 91
Mô tả
### 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`
Hướng dẫn đóng góp
Hướng nghiên cứu
Bắt đầu với bản tái hiện trên StackBlitz, đặc biệt là src/example/text-field-autosize-textarea-example.html, và tái hiện sự cố ở mức thu phóng trình duyệt 110% với cdkTextareaAutosize và line-height: 1.15. Theo dõi hành vi tự động điều chỉnh kích thước textarea của Angular CDK và xác minh rằng một textarea bốn dòng với line-height phân số không hiển thị thanh cuộn sau khi nhập thêm ký tự.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- angular, typescript
- Lĩnh vực
- frontend
- Loại issue
- Lỗi
- Độ khó
- 3/5
- Thời gian dự kiến
- 1-2 ngày
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 45/100