Слетание границы (border) у элемента input в мобильных браузерах, таких как Safari и Chrome, может быть вызвано различными причинами.
1. Пользовательский стиль: При создании собственного пользовательского стиля (CSS) для элементов input, вы можете случайно установить border: none, что приведет к отсутствию границы. В этом случае, вам необходимо перепроверить ваши стили и убедиться, что граница правильно задана.
2. Наличие атрибута "disabled": Если элемент input имеет атрибут "disabled", то граница будет автоматически скрыта в мобильных браузерах. Если вы хотите сохранить границу для отключенного элемента, вам необходимо явно задать стиль для таких элементов.
3. Viewport масштабирование: В некоторых случаях, браузеры масштабируют страницу, чтобы сделать ее более подходящей для экрана устройства. Это может привести к нежелательным изменениям в отображении элементов страницы, включая границы элемента input. Чтобы предотвратить эту проблему, вы можете использовать атрибут "viewport" для установки scale=1, что позволит браузеру не масштабировать страницу.
4. Ошибки браузера: В редких случаях, браузеры могут иметь ошибки, которые приводят к неправильному отображению границ элементов. В таких случаях вам может потребоваться обновление браузера или применение специфических обходных решений для конкретных браузеров.
В любом случае, чтобы исправить проблему со слетающей границей элемента input, вам следует внимательно проверить ваши стили, проверить наличие атрибута "disabled", убедиться в правильных настройках viewport и, при необходимости, обновить браузер или использовать обходные решения для конкретных ситуаций.