From b9d170092a94420ea656eb22c9c2e6dad7055fbc Mon Sep 17 00:00:00 2001 From: desig9stein Date: Fri, 24 Jul 2026 13:28:18 +0300 Subject: [PATCH 1/5] fix(input): improve autofill compatibility by using `-webkit-text-fill-color` - Refactored input text color logic to use a custom property (`--input-text-color`) for compatibility with autofill behavior in WebKit and Chromium. - Replaced transition-delay hack with `background-clip: text` and `-webkit-text-fill-color` to ensure proper rendering of autofilled inputs, especially in scenarios like floating labels in the material theme. --- src/components/input/themes/input.base.scss | 17 ++++++++++++----- .../input/themes/shared/input.common.scss | 18 ++++++++++++++---- .../input/themes/shared/input.material.scss | 4 +++- 3 files changed, 29 insertions(+), 10 deletions(-) diff --git a/src/components/input/themes/input.base.scss b/src/components/input/themes/input.base.scss index c416d6b46f..f1fdc11223 100644 --- a/src/components/input/themes/input.base.scss +++ b/src/components/input/themes/input.base.scss @@ -42,12 +42,19 @@ font-family: var(--ig-font-family); z-index: 1; - // This is a hack that removes the autofill background and it's essential, - // otherwise the background is on top of the floating label in material theme. - // The !important flag is because themes that defin transition delay on that element are overriding the transition delay hack + // Chromium and WebKit paint an opaque background and a fixed text color on + // autofilled fields through UA styles marked as !important, which can not be + // overridden by author styles. Without this the autofill background covers the + // floating label in the material theme. + // Clipping the background to the text makes it invisible, while the text itself + // is painted through `-webkit-text-fill-color`, which takes precedence over the + // UA `color`. Both are static declarations on purpose - the previous + // transition-delay hack only held back the background as long as a transition + // could actually run, so inputs first rendered while already autofilled + // (a login form in a dialog, for instance) still got the UA styling. &:is(:-webkit-autofill, :autofill) { - transition-property: background-color, color !important; - transition-delay: 99999s !important; + background-clip: text; + -webkit-text-fill-color: var(--input-text-color, currentcolor); } } diff --git a/src/components/input/themes/shared/input.common.scss b/src/components/input/themes/shared/input.common.scss index 27d38c06f0..068f656fcc 100644 --- a/src/components/input/themes/shared/input.common.scss +++ b/src/components/input/themes/shared/input.common.scss @@ -3,8 +3,12 @@ $theme: $base; +// The text color is mirrored in a custom property so that autofilled inputs can +// pick it up through `-webkit-text-fill-color`. See input.base.scss [part~='input'] { - color: var-get($theme, 'idle-text-color'); + --input-text-color: #{var-get($theme, 'idle-text-color')}; + + color: var(--input-text-color); } [part='prefix'] { @@ -19,7 +23,9 @@ $theme: $base; [part~='filled'] { [part~='input'] { - color: var-get($theme, 'filled-text-color'); + --input-text-color: #{var-get($theme, 'filled-text-color')}; + + color: var(--input-text-color); } [part='prefix'] { @@ -58,7 +64,9 @@ input::-webkit-datetime-edit { :host(:not([readonly], [disabled]):hover) { [part~='filled'] { [part~='input'] { - color: var-get($theme, 'filled-text-hover-color'); + --input-text-color: #{var-get($theme, 'filled-text-hover-color')}; + + color: var(--input-text-color); } } } @@ -66,7 +74,9 @@ input::-webkit-datetime-edit { :host(:not([readonly], [disabled]):focus-within) { [part~='filled'] { [part~='input'] { - color: var-get($theme, 'focused-text-color'); + --input-text-color: #{var-get($theme, 'focused-text-color')}; + + color: var(--input-text-color); } } } diff --git a/src/components/input/themes/shared/input.material.scss b/src/components/input/themes/shared/input.material.scss index 4ce09841cb..03c312e903 100644 --- a/src/components/input/themes/shared/input.material.scss +++ b/src/components/input/themes/shared/input.material.scss @@ -65,7 +65,9 @@ $fs: rem(16px) !default; } [part~='input filled'] { - color: var-get($theme, 'filled-text-color'); + --input-text-color: #{var-get($theme, 'filled-text-color')}; + + color: var(--input-text-color); } [part='label'] { From 6e1059ee9f9dbee18ec1ef03f388de972ca469ab Mon Sep 17 00:00:00 2001 From: desig9stein Date: Fri, 24 Jul 2026 13:46:23 +0300 Subject: [PATCH 2/5] fix(input): add `-webkit-background-clip: text` --- src/components/input/themes/input.base.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/input/themes/input.base.scss b/src/components/input/themes/input.base.scss index f1fdc11223..b1f2f2d18e 100644 --- a/src/components/input/themes/input.base.scss +++ b/src/components/input/themes/input.base.scss @@ -53,6 +53,7 @@ // could actually run, so inputs first rendered while already autofilled // (a login form in a dialog, for instance) still got the UA styling. &:is(:-webkit-autofill, :autofill) { + -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: var(--input-text-color, currentcolor); } From 932cf2adc27ec575a2be4fc03f7c9f7d3c8a792d Mon Sep 17 00:00:00 2001 From: Marin Popov Date: Fri, 24 Jul 2026 13:52:12 +0300 Subject: [PATCH 3/5] Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- src/components/input/themes/input.base.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/input/themes/input.base.scss b/src/components/input/themes/input.base.scss index b1f2f2d18e..c3e628fb2a 100644 --- a/src/components/input/themes/input.base.scss +++ b/src/components/input/themes/input.base.scss @@ -43,7 +43,7 @@ z-index: 1; // Chromium and WebKit paint an opaque background and a fixed text color on - // autofilled fields through UA styles marked as !important, which can not be + // autofilled fields through UA styles marked as !important, which cannot be // overridden by author styles. Without this the autofill background covers the // floating label in the material theme. // Clipping the background to the text makes it invisible, while the text itself From 32e6c68471aa03c751d0a6b76f578dc124215c65 Mon Sep 17 00:00:00 2001 From: Marin Popov Date: Fri, 24 Jul 2026 13:52:42 +0300 Subject: [PATCH 4/5] Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- src/components/input/themes/input.base.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/input/themes/input.base.scss b/src/components/input/themes/input.base.scss index c3e628fb2a..15d9bb8228 100644 --- a/src/components/input/themes/input.base.scss +++ b/src/components/input/themes/input.base.scss @@ -53,7 +53,7 @@ // could actually run, so inputs first rendered while already autofilled // (a login form in a dialog, for instance) still got the UA styling. &:is(:-webkit-autofill, :autofill) { - -webkit-background-clip: text; + -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: var(--input-text-color, currentcolor); } From 1999dcba9208f3845408cedf6fec84cffcd4d858 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Tue, 4 Aug 2026 11:00:32 +0300 Subject: [PATCH 5/5] fix(input): remove redundant autofill background-clip override - Simplify autofill handling by removing outdated `-webkit-background-clip: text`. --- src/components/input/themes/input.base.scss | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/src/components/input/themes/input.base.scss b/src/components/input/themes/input.base.scss index 15d9bb8228..41963186d7 100644 --- a/src/components/input/themes/input.base.scss +++ b/src/components/input/themes/input.base.scss @@ -42,18 +42,8 @@ font-family: var(--ig-font-family); z-index: 1; - // Chromium and WebKit paint an opaque background and a fixed text color on - // autofilled fields through UA styles marked as !important, which cannot be - // overridden by author styles. Without this the autofill background covers the - // floating label in the material theme. - // Clipping the background to the text makes it invisible, while the text itself - // is painted through `-webkit-text-fill-color`, which takes precedence over the - // UA `color`. Both are static declarations on purpose - the previous - // transition-delay hack only held back the background as long as a transition - // could actually run, so inputs first rendered while already autofilled - // (a login form in a dialog, for instance) still got the UA styling. + // Fix for https://github.com/IgniteUI/igniteui-webcomponents/pull/2298#pullrequestreview-4772572600 &:is(:-webkit-autofill, :autofill) { - -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: var(--input-text-color, currentcolor); }