(Esto es similar a la pregunta (también sin respuesta)# 3430506, pero se aplica a etiquetas de entrada en lugar de elementos HTML5).

En los botones <input type = "submit">, el navegador Safari iPhone / móvil agrega relleno a la izquierda y a la derecha. Esto no sucede en la versión de escritorio, ni en ningún otro navegador Webkit móvil / de escritorio que haya probado. Parece agregar el tamaño de fuente en px a cada lado (es decir, la fuente de 14px significa que el ancho total es 14px + ancho de texto + 14px).

Actualmente estoy intentando lo siguiente para eliminarlo:

/* webkit user-agent stylesheet uses input[type="submit"] */

form input[type="submit"] { /* more specific to override webkit */ 
   -webkit-appearance:none;  
   -webkit-border-radius:0px;
   margin:0;  
   padding:0;  
   border:0;  
   display:block;
}

He visto muchas respuestas sobre el uso de -webkit-apariencia: ninguna ... esto no hace ninguna diferencia. Tampoco elimina las esquinas redondeadas. Hice una página para hacer una demostración de cómo la versión de escritorio representa varios objetos -webkit-apariencia; todos tienen -webkit-border-radius: 0 y se aplica el código anterior.

Intenta verlos en Safari de escritorio y luego en iPhone:
http://deleri.com/test.html

(Captura de pantalla de Safari Mobile para aquellos sin iPhone :)
deleri.com/safari.png

Si bien me encantaría saber por qué ocurre este error, ahora estoy más preocupado por solucionarlo. He intentado todo tipo de visualización / desbordamiento / tamaño de caja / -webkit-anything- / width: opción auto / text-indent imaginable, y no puedo solucionarlo configurando manualmente el ancho (el ancho final debe ser un porcentaje- basado, y el relleno extraño todavía se aplica). Estoy empezando a preguntarme si es una propiedad oscura, o si la hoja de estilo del agente de usuario no se sobrescribe. ¿Alguna idea?