Subpixel rendering bug by notched areas in outlined components

[jeremylazarus]

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

  <div style="transform:translate(0, 50%); height:98px">
  <md-outlined-text-field label="Demo"></md-outlined-text-field>
  </div>

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/[email protected]

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

[asyncLiz]

FYI, this may be a difficult or impossible rendering bug to solve due to how the notch works with separate borders on sibling elements. I've seen this border alignment issue pop up for a few years now, and it has come and gone with browser and OS version updates.

I don't see it in Chrome 130 with macOS 15.1. Are you able to test other OS's to see if it's isolated to Windows?

[jeremylazarus]

I've only seen it in Windows 11.

Tested in:
macOS 15.2
Chromium under Ubuntu running with WSL in Windows.

But I found another requirement for replicating the bug which makes it even more of an edge case. You have to set your display or browser zoom to a certain scale. 150% is most obvious to me. It doesn't show up on multiples of 100%. I'll update my original post.

I did fiddle with it a bit and stripped down the css until I had close to the bare minimum to replicate it and fix it. Here's a codepen that replicates the issue. It doesn't have any material components but it has a small subset of the html and css from md-outlined-text-field. I haven't had a chance to delve into this in the actual repo, but since it's such an edge case I'm not sure if I'm going to worry about it anymore.

https://codepen.io/jeremylazarus/pen/JjgmyoE