(Isso é semelhante à pergunta (também sem resposta)# 3430506, mas se aplica a tags de entrada em vez de elementos HTML5.)

Nos botões <input type = "submit">, o navegador Safari para iPhone / celular adiciona preenchimento à esquerda e à direita. Isso não acontece na versão para desktop, nem em nenhum outro navegador Web / móvel para desktop que eu tentei. Parece adicionar o tamanho da fonte em px a cada lado (ou seja, a fonte de 14 px significa que a largura total é 14 px + largura do texto + 14 px).

Atualmente, estou tentando o seguinte para removê-lo:

/* 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;
}

Eu já vi muitas respostas sobre o uso de -webkit-aparecimento: nenhum ... isso não faz diferença. Nem remover cantos arredondados. Fiz uma página para demonstrar como a versão para desktop renderiza vários objetos de aparência do kit de web; todos têm -webkit-border-radius: 0 e o código acima aplicado.

Tente visualizá-los no Safari do desktop e no iPhone:
http://deleri.com/test.html

(Captura de tela do Safari Mobile para quem não tem iPhone :)
deleri.com/safari.png

Embora eu adorasse saber por que esse bug ocorre, agora estou mais preocupado em corrigi-lo. Eu tentei todos os tipos de opção display / overflow / box-sizing / -webkit-everything- / width: auto / opção de indentação de texto imaginável e não consigo corrigi-lo definindo manualmente a largura (a largura final precisa ser porcentagem- com base e o preenchimento estranho ainda se aplica). Estou começando a me perguntar se é alguma propriedade obscura ou se a folha de estilo do agente do usuário não está sendo substituída. Alguma ideia?