Absolut positionierte Eingabebreite auf mobilen Safari

Ich habe einen Eingang, der absolut in einem Container positioniert ist. Der Container hat die feste Breite 200 und der Eingang ist mit 160 mit einem Abstand von 20 auf der linken Seite festgelegt. Dies erzeugt das Ergebnis, das Sie auf Chrome erwarten:Absolut positionierte Eingabebreite auf mobilen Safari

Aber auf mobilen Safari ... es sieht wie folgt aus:

Here is a minimum reproducible bug. Anweisungen, wie Sie es in Betrieb nehmen können, finden Sie in der Readme-Datei.

Dieser Fehler tritt nicht auf, wenn die innere Komponente eine div ist, aber scheint spezifisch für input zu sein.

Wie formatiert man eine absolut positionierte Texteingabe auf einer mobilen Safari so, dass sie auf Chrome, Safari und Firefox ausgerichtet ist?

Quelle

2017-03-28 samcorcos

Mmhmm ... und was ist Ihre Frage? –

@ObsidianAge Ich ging voran und aktualisierte den Beitrag mit einer Frage am Ende:> Wie formatiert man eine absolut positionierte Texteingabe auf einer mobilen Safari so, dass sie sich genauso an Chrome, Safari und Firefox anpasst? – samcorcos

Können Sie bitte eine Geige erstellen? Wäre leichter zu sehen, Änderungen vorgenommen. Danke –

Fügen Sie einfach padding:0 in Ihr Feld input ein und es sollte das Problem lösen. Dies scheint ein bekanntes Problem in Safari für iOS zu sein, da es standardmäßig zusätzliche Eingabefelder in Eingabefeldern hinzufügt.

Nahm etwas Hilfe von hier, es zu beheben:

Input field showing different size in iOS

nicht relevant Ort finden Könnten Sie es in Ihrem Code in GIT zu beheben. Schätze ich bin neu zu reagieren :)

Hoffe das hilft. Prost!

Screenshot unten: