<input type = "submit"> bug de preenchimento no Safari mobile?
(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?