Subpixel rendering bug by notched areas in outlined components

Nobody has claimed this yet.

### What is affected?

Component, Theming

### Description

There is a subpixel rendering bug by the floating label area in outlined components under a certain set of conditions as described in the reproduction steps.

Actual:

Expected:

### Reproduction

Steps to reproduce:
1. Use a chromium based-browser
2. Have a content area that is not a multiple of 4 (97px, 98px, 99px reproduce the bug, but 96px and 100px do not)
3. Apply certain transformations to the content area. Example: translate(0, 50%)
4. Include an outlined field in the content area with a label
5. Set the browser scale/zoom to certain values, example: 150%. Or set the display scale instead. Multiples of 100% do not reproduce the bug.

Expected results:
A smooth border around the field.

Actual results:
There is a subpixel rendering problem around the notched area of the field.

https://codepen.io/jeremylazarus/pen/ZEgRNKV
```

```

### Workaround

There are various ways to work around this issue. Some involve forcing GPU rendering on the component. For example, you can set a transform: translate3d(0, 0, 0) or rotateX(.000001deg) on certain container elements. Those haven't looked perfect for me, though. You can mess with the height of the containing element so that it has a height that is a multiple of 4 (this may include margins and padding). But that isn't ideal, especially if you're using relative heights.

### Is this a regression?

No or unsure. This never worked, or I haven't tried before.

### Affected versions

@material/web@2.2.0

### Browser/OS/Node environment

Browser: Microsoft Edge 130.0.2849.68 (Official build) (64-bit)
Browser: Google Chrome 130.0.6723.70 (Official Build) (64-bit) (cohort: Stable)
OS: Windows 11 Version 24H2

Start with the linked CodePen reproduction using , Chromium, a 98px transformed container, and 150% zoom. Compare the outlined field under the reproducing and non-reproducing dimensions and confirm the rendering behavior on the listed browsers. Done means the border around the floating-label notch renders smoothly under the reported conditions without relying on the listed workarounds.

Written by the indexing model from the issue text.