fixup! fix(material-experimental/mdc-form-field): fix notch visual artifact

Author: mmalerba

src/material-experimental/mdc-form-field/_form-field-theme.scss

@@ -57,6 +57,25 @@
       .mat-mdc-form-field.mat-warn {
         @include _color-styles(error);
       }
+
+      // This fixes an issue where the notch appears to be thicker than the rest of the outline when
+      // zoomed in on Chrome. The border inconsistency seems to be some kind of rendering artifact
+      // that arises from a combination of the fact that the notch contains text, while the leading
+      // and trailing outline do not, combined with the fact that the border is semi-transparent.
+      // Experimentally, I discovered that adding a transparent left border fixes the inconsistency.
+      // Note: class name is repeated to achieve sufficient specificity over the various MDC states.
+      // (hover, focus, etc.)
+      // TODO(mmalerba): port this fix into MDC
+      .mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field {
+        .mdc-notched-outline__notch {
+          border-left: 1px solid transparent;
+
+          [dir='rtl'] & {
+            border-left: none;
+            border-right: 1px solid transparent;
+          }
+        }
+      }
     }
   }
 }

src/material-experimental/mdc-form-field/directives/notched-outline.ts

@@ -62,8 +62,11 @@ export class MatFormFieldNotchedOutline implements AfterViewInit {
   _getNotchWidth() {
     if (this.open) {
       const NOTCH_ELEMENT_PADDING = 8;
+      const NOTCH_ELEMENT_BORDER = 1;
       return this.labelWidth > 0
-        ? `calc(${this.labelWidth}px * var(--mat-mdc-form-field-floating-label-scale, 0.75) + ${NOTCH_ELEMENT_PADDING}px)`
+        ? `calc(${this.labelWidth}px * var(--mat-mdc-form-field-floating-label-scale, 0.75) + ${
+            NOTCH_ELEMENT_PADDING + NOTCH_ELEMENT_BORDER
+          }px)`
         : '0px';
     }
 

src/material-experimental/mdc-form-field/form-field.scss

@@ -122,18 +122,18 @@
   box-sizing: border-box;
 }
 
-// This fixes an issue where the notch appears to be thicker than the rest of the outline when
-// zoomed in on Chrome. The border inconsistency seems to be some kind of rendering artifact that
-// arises from a combination of the fact that the notch contains text, while the leading and
-// trailing outline do not, combined with the fact that the border is semi-transparent.
-// Experimentally, I discovered that adding a transparent left border fixes the inconsistency.
-// In addition some negative left margin is added to compensate for the transparent border and
-// fully fix the issue.
-// TODO(mmalerba): port this fix into MDC
-.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field {
-  .mdc-notched-outline__notch {
-    border-left: 1px solid transparent;
-    margin-left: -1px;
+// In the form-field theme, we add a 1px left margin to the notch to fix a rendering bug in Chrome.
+// Here we apply negative margin to offset the effect on the layout and a clip-path to ensure the
+// left border is completely hidden. (Though the border is transparent, it still creates a triangle
+// shaped artifact where it meets the top and bottom borders.)
+.mat-mdc-form-field .mdc-notched-outline__notch {
+  margin-left: -1px;
+  clip-path: inset(-100vh -100vw -100vh 1px);
+
+  [dir='rtl'] & {
+    margin-left: 0;
+    margin-right: -1px;
+    clip-path: inset(-100vh 1px -100vh -100vh);
   }
 }