fix(cdk/text-field): fixed auto-size line-height bug at 110% zoom

[originalajitest]

Fix scrollbar appearing with decimal line-height values in textarea autosize

Fixes #32178

Problem

When using a <textarea> with cdkTextareaAutosize and a decimal line-height value (e.g., 1.15), a vertical scrollbar appears even when the content fits within the view. This issue occurs at certain browser zoom levels (e.g., 110%) where fractional pixel values get truncated by the browser.

The root cause is in the _measureScrollHeight() method, which subtracts 4 from the measured scrollHeight to account for the 2px top and bottom padding added by the measuring class. However, when the browser truncates fractional pixels (e.g., 20.4px becomes 20px), subtracting 4 can result in a height that's slightly less than what's actually needed, causing a scrollbar to appear.

Solution

Changed the subtraction value from 4 to 3.5 in _measureScrollHeight(). This provides a small margin that accounts for fractional pixel truncation, preventing scrollbars from appearing when using decimal line-height values.

Changes

• src/cdk/text-field/autosize.ts: Changed subtraction value from 4 to 3.5 in _measureScrollHeight() method
• src/cdk/text-field/autosize.spec.ts: Added test 'should not show scrollbar with decimal line-height values at 110% zoom' that verifies the fix and would fail if the value was 4

Testing

• Added a unit test that simulates the fractional pixel truncation scenario
• Test verifies that no scrollbar appears when using decimal line-height values
• Test would fail if the subtraction value was 4, ensuring the fix is properly validated

Impact

• Breaking changes: None
• Behavior change: Textareas with decimal line-height values will no longer show unnecessary scrollbars
• Browser compatibility: Fixes the issue in Chrome and Edge (and potentially other browsers) at certain zoom levels

[tjshiu]

nit: Can we include that it's (2px top + 2px bottom) so there is more context.

[tjshiu]

Where is the 0.5 px coming from the layout ? Is this just simulating the extra 110% browser zoom? And it's just an example right?

And I am also not sure if I understand that it can be 1px smaller than the "real" need. Isn't it 0.5px smaller? Or maybe you mean it can be UP to 1px smaller than the real need - since it rounds down.

[originalajitest]

I am not sure either 😭. I asked cursor to make a regression test for it (because of the contributing guidelines) and this is what it came up for it after a bunch of attempts. I do know that this solution works, why it works and I can provide screenshot proof and mathematical proof why it works.
The addition of 0.5 does not really add 0.5, it is 0.5 to be more palatable, internally, the 0.5 is rounded up to get us an extra pixel of scroll height.