[web] Hide autofill overlay #39294

htoor3 · 2023-01-31T18:44:31Z

There's an issue currently where the autofill overlay renders on top of our Flutter-rendered text inputs. We previously were preventing these overlays from rendering via a transition-delay - however, scrolling immediately after autofilling short circuits these transition delays and renders the overlay anyways.

This PR is changing the styling to instead hide the overlays rather than delay their rendering. We do this by making the overlays completely transparent, which solves this issue.

Fixes flutter/flutter#118337

Pre-launch Checklist

I read the [Contributor Guide] and followed the process outlined there for submitting PRs.
I read the [Tree Hygiene] wiki page, which explains my responsibilities.
I read and followed the [Flutter Style Guide] and the [C++, Objective-C, Java style guides].
I listed at least one issue that this PR fixes in the description above.
I added new tests to check the change I am making or feature I am adding, or Hixie said the PR is test-exempt. See [testing the engine] for instructions on writing and running engine tests.
I updated/added relevant documentation (doc comments with ///).
I signed the [CLA].
All existing and new tests are passing.

ditman

So firefox and safari understand -webkit-autofill, but internally they call it just autofill, all right then!

ditman · 2023-02-01T21:19:54Z

lib/web_ui/lib/src/engine/host_node.dart

-  // See: https://github.com/flutter/flutter/issues/61132.
+  // This CSS makes the autofill overlay transparent in order to prevent it
+  // from overlaying on top of Flutter-rendered text inputs.
+  // See: https://github.com/flutter/flutter/issues/118337.
  if (browserHasAutofillOverlay()) {
    sheet.insertRule('''
      $cssSelectorPrefix .transparentTextEditing:-webkit-autofill,
      $cssSelectorPrefix .transparentTextEditing:-webkit-autofill:hover,
      $cssSelectorPrefix .transparentTextEditing:-webkit-autofill:focus,
      $cssSelectorPrefix .transparentTextEditing:-webkit-autofill:active {


Should we start targeting the standard :autofill pseudo-class as well?

It does mention here https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill to use both for best browser compatibility, but in manual testing:

I was able to use the CSSOM to read the above :-webkit-autofill style on every browser. Like you mentioned above, safari and firefox just read it internally as :autofill

Interestingly enough, Chrome wouldn't read it at all if we just used :autofill...chrome and edge both need the webkit prefix.

So we can certainly conditionally target the :autofill selector for Firefox and Safari for "completeness", but it works fine as is too. The one downside I see in targeting :autofill as well is that it won't work for older versions of those browsers.

What do you think?

I think that until firefox and safari break because they don't recognize -webkit-autofill, we're fine :P

… (#119833) Commit: 201380ab26988e5d7a6c2567850ba2c61bff0f51

…lutter/flutter#119833)

* 254a796 Revert "Reland "Add --serve-observatory flag to run, attach, and test (#118402)" (#119529)" (flutter/flutter#119729) * 1573c12 Marks Mac_android microbenchmarks to be unflaky (flutter/flutter#119727) * 5613ab0 remove unnecessary parens (flutter/flutter#119736) * 1305a50 Roll Flutter Engine from c08a286d60e9 to ba3adb74d952 (5 revisions) (flutter/flutter#119741) * 484d881 [conductor] update console link (flutter/flutter#118338) * 73124dc Fix `ListTileThemeData.copyWith` doesn't override correct properties (flutter/flutter#119738) * bc8927c 2b8dd4e5c Use Windows high contrast black/white theme with `MaterialApp` themes (flutter/engine#39206) (flutter/flutter#119747) * 578edfc Catch errors thrown while handling pointer events (flutter/flutter#119577) * 8fd5d4e Remove deprecated SystemNavigator.routeUpdated method (flutter/flutter#119187) * 7a926dc Deprecate MediaQuery[Data].fromWindow (flutter/flutter#119647) * cd118da Update a test expectation that depended on an SkParagraph fix (flutter/flutter#119756) * 4ae2d3b 🔥 Do not format the messages file for `gen-l10n` (flutter/flutter#119596) * 8f5949e Roll Flutter Engine from 2b8dd4e5c699 to a12d102773dd (2 revisions) (flutter/flutter#119758) * 4c99da6 Avoid printing blank lines between "Another exception was thrown:" messages. (flutter/flutter#119587) * 2ecf4ae Update the counter app to enable Material 3 (flutter/flutter#118835) * 0b8486d 29d09845f Roll Dart SDK from b47964e5d575 to 1c219a91e637 (1 revision) (flutter/engine#39324) (flutter/flutter#119763) * ca7b7e3 Roll Flutter Engine from 29d09845f21e to 97d27ff59459 (2 revisions) (flutter/flutter#119765) * 475fc4a Run Mac hostonly tests on any available arch (flutter/flutter#119762) * 322d10e 18118e10a Add iOS spring animation objc files (flutter/engine#38801) (flutter/flutter#119768) * f767f86 check if directory exists before listing content (flutter/flutter#119748) * 34730c7 Revert "Run Mac hostonly tests on any available arch (#119762)" (flutter/flutter#119784) * f9daa9a Roll Flutter Engine from 18118e10a0a5 to 679c4b42e222 (4 revisions) (flutter/flutter#119783) * fd76ef0 Reland "Add API for discovering assets" (flutter/flutter#119277) * ca0596e Fix `pub get --unknown-flag` (flutter/flutter#119622) * 9abb6d7 Roll Plugins from 9da327c to 9302d87 (11 revisions) (flutter/flutter#119825) * 9eafbcc Roll Flutter Engine from 679c4b42e222 to 388890a98e5b (6 revisions) (flutter/flutter#119830) * 1ee8799 Revert "[Re-land] Exposed tooltip longPress (#118796)" (flutter/flutter#119832) * 07b51a0 Add missing variants and *new* indicators to `useMaterial3` docs (flutter/flutter#119799) * 201380a e9e601c7c [web] Hide autofill overlay (flutter/engine#39294) (flutter/flutter#119833) * 1c0065c 27f55219d Roll Fuchsia Linux SDK from QxkjqmRgowkk_n2NZ... to pWloCaRzjLEAUvQEz... (flutter/engine#39339) (flutter/flutter#119838) * e7d934a Marks Linux_android android_choreographer_do_frame_test to be flaky (flutter/flutter#119721) * 3f986e4 Roll Flutter Engine from 27f55219df79 to ae38c9585a61 (2 revisions) (flutter/flutter#119840) * b0f1714 Make Flex,Row,Column const for real (flutter/flutter#119673) * d4b6898 [web] Put all index.html operations in one place (flutter/flutter#118188) * d63987f Parser machine logs (flutter/flutter#118707) * 22bbdf0 Android defines target update (flutter/flutter#119766) * 8387c23 [flutter_tools] Use base DAP detach and ensure correct output (flutter/flutter#119076) * d820aec Manual pub roll with dwds fix (flutter/flutter#119575) * 72f9cf5 Roll Flutter Engine from ae38c9585a61 to 616ecd8be3de (3 revisions) (flutter/flutter#119859) * cfdc358 roll packages (flutter/flutter#119865) * d875899 Bump test Chrome version for Mac arm support (flutter/flutter#119773) * 9b86a48 Fix gets removedItem instead of its index (flutter/flutter#119638) * 66b2ca6 Roll Flutter Engine from 616ecd8be3de to 2871970337df (3 revisions) (flutter/flutter#119870) * c626460 Make `_focusDebug` not interpolate in debug mode (flutter/flutter#119680) * a27802e flutter_tool: remove explicit length header in HTTP response (flutter/flutter#119869) * 3570cce Remove deprecated kind in GestureRecognizer et al (flutter/flutter#119572) * bc45b18 2696fff87 Roll Skia from c2d81db3ef41 to 4f0166baf5a4 (13 revisions) (flutter/engine#39348) (flutter/flutter#119879) * f3effce Roll Flutter Engine from 2696fff8716d to e3fe6dade964 (3 revisions) (flutter/flutter#119892) * 69421c1 [framework] use shader tiling instead of repeated calls to drawImage (flutter/flutter#119495) * 6b83eff Roll Flutter Engine from e3fe6dade964 to 655530e3fd15 (5 revisions) (flutter/flutter#119905) * a5d8a4a 67d35267c [Impeller] Use minimal coverage for stencil restores after overdraw prevention (flutter/engine#39358) (flutter/flutter#119910) * fc8ea56 0fb48ce5b Roll Dart SDK from 69452c5012d9 to be795cc64bd7 (1 revision) (flutter/engine#39360) (flutter/flutter#119926) * e0b2138 Dispose OverlayEntry in TooltipState. (flutter/flutter#117291) * c5e8757 Add M3 support for iconbuttons in error state in TextFields (flutter/flutter#119925)

…lutter/flutter#119833)

htoor3 added 3 commits January 31, 2023 12:23

Make autofill styling transparent

8614d88

Formatting

a7a0de5

Add tests

b7a45f0

flutter-dashboard bot added the platform-web Code specifically for the web engine label Jan 31, 2023

htoor3 added 3 commits January 31, 2023 13:33

Merge remote-tracking branch 'upstream/main' into hide-autofill-overlay

34446df

Modify tests

91bc9a5

Add correct prefix for safari and firefox tests

7ff9f6e

htoor3 requested review from ditman and mdebbar February 1, 2023 17:36

mdebbar approved these changes Feb 1, 2023

View reviewed changes

ditman approved these changes Feb 1, 2023

View reviewed changes

htoor3 added the autosubmit Merge PR when tree becomes green via auto submit App label Feb 2, 2023

auto-submit bot merged commit e9e601c into flutter:main Feb 2, 2023

engine-flutter-autoroll mentioned this pull request Feb 2, 2023

Roll Flutter Engine from 388890a98e5b to e9e601c7cb35 (1 revision) flutter/flutter#119833

Merged

engine-flutter-autoroll added a commit to engine-flutter-autoroll/flutter that referenced this pull request Feb 2, 2023

e9e601c7c [web] Hide autofill overlay (flutter/engine#39294)

102b4e1

auto-submit bot pushed a commit to flutter/flutter that referenced this pull request Feb 2, 2023

e9e601c7c [web] Hide autofill overlay (flutter/engine#39294) (#119833)

201380a

sourcegraph-bot pushed a commit to sgtest/megarepo that referenced this pull request Feb 2, 2023

flutter: e9e601c7c [web] Hide autofill overlay (flutter/engine#39294)…

32e56c2

… (#119833) Commit: 201380ab26988e5d7a6c2567850ba2c61bff0f51

engine-flutter-autoroll mentioned this pull request Feb 2, 2023

Roll Flutter from 1573c12963c6 to 201380ab2698 (27 revisions) flutter/packages#3153

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 2, 2023

201380a e9e601c7c [web] Hide autofill overlay (flutter/engine#39294) (f…

84391b8

…lutter/flutter#119833)

This was referenced Feb 2, 2023

Roll Flutter from d27880801435 to 201380ab2698 (29 revisions) flutter/plugins#7086

Closed

Roll Flutter from ca0596e41da3 to 1c0065c8d6a0 (6 revisions) flutter/packages#3154

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Feb 2, 2023

201380a e9e601c7c [web] Hide autofill overlay (flutter/engine#39294) (f…

d951bae

…lutter/flutter#119833)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 2, 2023

201380a e9e601c7c [web] Hide autofill overlay (flutter/engine#39294) (f…

c7f798e

…lutter/flutter#119833)

engine-flutter-autoroll mentioned this pull request Feb 2, 2023

Roll Flutter from d27880801435 to e7d934a01466 (31 revisions) flutter/plugins#7088

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Feb 2, 2023

201380a e9e601c7c [web] Hide autofill overlay (flutter/engine#39294) (f…

320d07e

…lutter/flutter#119833)

engine-flutter-autoroll mentioned this pull request Feb 2, 2023

Roll Flutter from ca0596e41da3 to e7d934a01466 (7 revisions) flutter/packages#3156

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 2, 2023

201380a e9e601c7c [web] Hide autofill overlay (flutter/engine#39294) (f…

c0b5da9

…lutter/flutter#119833)

This was referenced Feb 3, 2023

Roll Flutter from ca0596e41da3 to c5e8757fcb79 (30 revisions) flutter/packages#3159

Closed

Roll Flutter from d27880801435 to c5e8757fcb79 (54 revisions) flutter/plugins#7092

Merged

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 3, 2023

201380a e9e601c7c [web] Hide autofill overlay (flutter/engine#39294) (f…

ada0a8f

…lutter/flutter#119833)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Feb 3, 2023

201380a e9e601c7c [web] Hide autofill overlay (flutter/engine#39294) (f…

c990b2b

…lutter/flutter#119833)

engine-flutter-autoroll mentioned this pull request Feb 3, 2023

Roll Flutter from ca0596e41da3 to 7177c413a9e5 (31 revisions) flutter/packages#3160

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 3, 2023

201380a e9e601c7c [web] Hide autofill overlay (flutter/engine#39294) (f…

073d92c

…lutter/flutter#119833)

engine-flutter-autoroll mentioned this pull request Feb 3, 2023

Roll Flutter from ca0596e41da3 to 96c8c6974186 (32 revisions) flutter/packages#3161

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 3, 2023

201380a e9e601c7c [web] Hide autofill overlay (flutter/engine#39294) (f…

edc7c9a

…lutter/flutter#119833)

engine-flutter-autoroll mentioned this pull request Feb 3, 2023

Roll Flutter from ca0596e41da3 to 00b0d550c684 (33 revisions) flutter/packages#3162

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 3, 2023

201380a e9e601c7c [web] Hide autofill overlay (flutter/engine#39294) (f…

a56f907

…lutter/flutter#119833)

engine-flutter-autoroll mentioned this pull request Feb 3, 2023

Roll Flutter from ca0596e41da3 to b65ae62cf484 (34 revisions) flutter/packages#3163

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 3, 2023

201380a e9e601c7c [web] Hide autofill overlay (flutter/engine#39294) (f…

912d3f3

…lutter/flutter#119833)

engine-flutter-autoroll mentioned this pull request Feb 4, 2023

Roll Flutter from ca0596e41da3 to 61f6a0bcd476 (48 revisions) flutter/packages#3165

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 4, 2023

201380a e9e601c7c [web] Hide autofill overlay (flutter/engine#39294) (f…

12f596e

…lutter/flutter#119833)

engine-flutter-autoroll mentioned this pull request Feb 4, 2023

Roll Flutter from ca0596e41da3 to 61f6a0bcd476 (48 revisions) flutter/packages#3166

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 4, 2023

201380a e9e601c7c [web] Hide autofill overlay (flutter/engine#39294) (f…

b5a8863

…lutter/flutter#119833)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 5, 2023

201380a e9e601c7c [web] Hide autofill overlay (flutter/engine#39294) (f…

72f5b6b

…lutter/flutter#119833)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 5, 2023

201380a e9e601c7c [web] Hide autofill overlay (flutter/engine#39294) (f…

fb68861

…lutter/flutter#119833)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 6, 2023

201380a e9e601c7c [web] Hide autofill overlay (flutter/engine#39294) (f…

862fd98

…lutter/flutter#119833)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 6, 2023

201380a e9e601c7c [web] Hide autofill overlay (flutter/engine#39294) (f…

06282a2

…lutter/flutter#119833)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 6, 2023

201380a e9e601c7c [web] Hide autofill overlay (flutter/engine#39294) (f…

c44d156

…lutter/flutter#119833)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 6, 2023

201380a e9e601c7c [web] Hide autofill overlay (flutter/engine#39294) (f…

a5a0a03

…lutter/flutter#119833)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[web] Hide autofill overlay #39294

[web] Hide autofill overlay #39294

Uh oh!

htoor3 commented Jan 31, 2023 •

edited

Loading

Uh oh!

ditman left a comment

Uh oh!

ditman Feb 1, 2023

Uh oh!

htoor3 Feb 1, 2023

Uh oh!

ditman Feb 2, 2023

Uh oh!

Uh oh!

[web] Hide autofill overlay #39294

[web] Hide autofill overlay #39294

Uh oh!

Conversation

htoor3 commented Jan 31, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pre-launch Checklist

Uh oh!

ditman left a comment

Choose a reason for hiding this comment

Uh oh!

ditman Feb 1, 2023

Choose a reason for hiding this comment

Uh oh!

htoor3 Feb 1, 2023

Choose a reason for hiding this comment

Uh oh!

ditman Feb 2, 2023

Choose a reason for hiding this comment

Uh oh!

Uh oh!

htoor3 commented Jan 31, 2023 •

edited

Loading