Autocomplete on input making content jump

Question

I have an input and in Chrome when the autocomplete menu pops up and you hover over one of the selections the content below the input jumps. Its like the autocomplete selection is adding vertical padding for some reason. How can I stop this it's annoying. Here is an example:

Fiddle Demo

You will probably have to go the fiddle because in the snippet the autocomplete is disabled for some reason. But if you click on the input and hover over an autocomplete entry you can see the green box move. Why is this happening and how do you disable this behavior.

div{
  width:300px;
  height:200px;
  background: green;
}

<input type="text" name="q" />
<div></div>

Answer 1

It's related to the default styles that webkit browsers apply to autofill. It seems there is a defined border different from the default one. You can simply try to override some styles in order to avoid the issue.

Changing only the border fixed this (at least for me)

div{
  width:300px;
  height:200px;
  background: green;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus {
  border:1px inset;
}

<input type="text" name="q" />
<div></div>

Related: Removing input background colour for Chrome autocomplete?