No se puede hacer que la transición de ancho CSS funcione

No pude encontrar cómo hacer que la transición de ancho CSS funcione. Bueno, en realidad funciona, pero solo pasa de auto a 100% sin animación.

Aquí está mi CSS:

 div#searchbar { padding: 10px; background-color: #404040; } .searchbar input { box-sizing: border-box; padding: 10px; font-family: Open Sans; font-size: 16px; color: #404040; outline: none; background-color: #909090; padding-left: 40px; -webkit-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out; } .searchbar input:hover { width: 100%; } 

Aquí está el HTML:

    Test           

También hay una cosa que me molesta, se puede ver en la siguiente imagen:

Imagen que es el borde blanco que se muestra a veces.

¿Cómo puedo hacer que todo funcione?

Debe agregar una regla de width para el selector sin desplazamiento.

https://jsfiddle.net/qz3qj846/