Hovering a Chrome field-suggestion shrinks input

Question

I'm using the latest version of Chrome (74.0.3729.169) and noticed something slightly frustrating/interesting.

In the example below, begin typing an email address that you've used before. Once Chrome's suggestions appear, hover over one of them. Notice how dramatically the input shrinks.

input { padding: 5px; border: 1px solid #ccc; }

<input id="email" name="email" type="text" placeholder="Email">

I apologize if this doesn't recreate the behavior, however I've now been able to recreate it with this snippet across multiple computers, so I'm fairly confident this should work.

Additionally (to dip my toes into Meta a bit here) there's a fairly dramatic example of this on StackOverflow's very own login screen, in which the entire form shrinks as a result.

Compare the width of the two images below. Or, in the second image, compare the width of the "suggestion" with the input to which it corresponds.

From inspecting the input itself, I don't see any new styles that would explain this behavior. It doesn't seem related to padding either, as an input without padding still demonstrates this behavior.

My question is two-fold: Why does hovering a suggestion cause the input to shrink, and, is there a method/workaround to prevent this, other than fixed width or disabling suggestions entirely?

(I think that both of these workarounds are conditional. There are instances where you may not want to specify an input width for styling purposes, and disabling suggestions seems excessive and harmful to UX)

Or perhaps a Chromium bug ticket somewhere (I've searched with no luck - googling anything related to Chrome's autofill/autocomplete is a mess of unrelated articles about security)?

duplicate or closely related: https://stackoverflow.com/a/56617262/8620333 — Temani Afif, Jul 01 '19 at 13:45
@TemaniAfif Very similar question, and good answer. Though, it seems to address specifically the *border* as opposed to the width. In your answer, I still see a drastic change in width of the input. For that reason I don't think it's exactly a duplicate (plus, it has no accepted answer, so I'm not sure it should be marked as one anyway). Optimally the two would be "merged" because they're certainly addressing the same concern, but in their current state they're asking about two different symptoms of the same bug, meaning answers aren't guaranteed to overlap. — Tyler Roper, Jul 01 '19 at 13:55
@TylerRoper because the OP was only bothered by the border and the height change, not the width but the issue is the same, you need to reset the default styles applied by the browser and related to `-webkit-autofill` (as a side note we cannot close a question with a bounty) .. will probably add the answer here too — Temani Afif, Jul 01 '19 at 13:57
@TemaniAfif Correct, I agree that the issue is one in the same. I'm just saying that an answer to the other (which is specific to *border*) doesn't explain how to leave the width unchanged. While it may be as simple as `width: initial`, the absence of that tidbit makes me think the other question/answer isn't sufficient for *this* question. I'd encourage you to add an answer to this as well, personally. — Tyler Roper, Jul 01 '19 at 13:59
@TylerRoper unfortunately even `width:initial` or `auto` will do nothing. I guess there is no trivial fix if you are not setting an explicit width — Temani Afif, Jul 01 '19 at 15:11

score 6 · Accepted Answer · answered Jul 01 '19 at 14:43

What you are facing is related to :-webkit-autofill pseudo class that is applying some default styling to the input with an autocomplete.

The :-webkit-autofill CSS pseudo-class matches when an element has its value autofilled by the browser.

Unnfortunately, I am not able to find where exactly those styles are defined but here is an example to confirm this. If you try to use the same value of width you will avoid the shrink effect:

:-webkit-autofill {
  width: 173px;
}

<input id="email" name="email" type="text" placeholder="Email">

In the above link you can also read:

Note: The user agent style sheets of many browsers use !important in their :-webkit-autofill style declarations, making them non-overrideable by webpages without resorting to JavaScript hacks.

So even with !important you won't be able to override some styles:

:-webkit-autofill {
  width: 173px;
  background:red!important; /* will not work*/
  border:2px solid blue;
  margin-left:150px;
}

<input id="email" name="email" type="text" placeholder="Email">

For the width issue, I guess the only way is to define an explicit width as I have tried auto, initial, unset, etc and they aren't working.

If you cannot set a width and you want the default one, you can consider JS to do this:

document.querySelector('#email').style.width=document.querySelector('#email').offsetWidth+"px";

<input id="email" name="email" type="text" placeholder="Email">

Hovering a Chrome field-suggestion shrinks input

1 Answers1

Linked