El problema principal es que muchas versiones de Chrome y Safari utilizan un motor de renderizado llamado Webkit (1). Este motor tiene algunas particularidades, sobre todo en los elementos de un formulario, que no son compartidas por navegadores como Internet Explorer o Firefox.
Muchas veces verás sombras en los campos de texto, degradados o bordes circulares que no estaban previstos. La solución está en la propiedad CSS appearance y más específicamente en la propiedad -webkit-appearance.
Para eliminar todos los estilos que se añaden por el motor de renderizado, utilizamos el código:
Lamentablemente, vimos que esta técnica trae mas problemas que soluciones. Por ejemplo, hace que ya no se vean las flechas de los campos de selección o que los botones radio o checkbox desaparezcan por completo.
Es por eso que es mas seguro utilizar el código siguiente:
A veces es mejor no tocar estas propiedades y dejar al navegador hacer el renderizado que crea necesario. Después de todo es más ergonómico para los usuarios finales, ya que ellos tienen una idea ya definida de como se ven estos elementos en su navegador.
(1) Información sobre webkit: https://webkit.org/
