search

material-components / material-web

Material Design Web Components
https://material-web.dev
Apache License 2.0
9.33k stars 892 forks source link

Subpixel rendering bug by notched areas in outlined components #5741

Open jeremylazarus opened 3 days ago

jeremylazarus commented 3 days ago

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:

floating_label_outline_bug

Expected:

outline fix

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

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/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

asyncLiz commented 1 day ago

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?