Сумка iOS с типом ввода = "текст"

Question

Я создаю веб-форму, которая имеет одно настраиваемое поле ввода с типом «текст».

CSS выглядит

input { 
height: 39px; 
font-size: 14px; 
color: #fff; 
background: #000000 url(../img/search-bg-white.png) no-repeat 95% center; 
border: none; 
padding: 0 50px 0 10px; 
width: 100%; 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
-o-box-sizing: border-box; 
box-sizing: border-box; 
-webkit-border-radius: 0; 
-moz-border-radius: 0; 
border-radius: 0; 
} 

Когда я нажимаю на него в iPhone 6 все элементы desapiare exluding элементы формы без этого входа

И результат http://gyazo.com/790da935bbfc946420cd37a24b2302db, и я не понимаю, что делать

Answer 1

Я видел множество исчезающих элементов, странное поведение прокрутки и проблемы с клавиатурой происходят в различных приложениях для просмотра iOS 8+. Эта проблема, по-видимому, связана с вложением входов внутри прокручиваемых элементов или комбинацией прокручиваемых элементов с другим элементом на странице - я не смог ее изолировать. (Поведение, которое я вижу, не всегда происходит на странице со входами, поэтому ответ @Josh Crozier выше будет работать в 100% случаев для моего дела.)

Решение, которое я нашел, состояло в том, чтобы подождать, пока страница не будет визуализируется, а затем корректирует z-индекс элемента прокрутки, который, как я предполагаю, заставляет механизм рендеринга перерисовать слой.

Чтобы проверить, подходит ли это для вас, попробуйте загрузить страницу на iPhone 6, подключенную к вашему разработчику Mac через USB, и осмотреть страницу в Safari. Перед тем как перейти в поле ввода, используйте инструменты разработчика Safari, чтобы настроить z-индекс родительского прокручиваемого контейнера (или добавить индекс z, если он отсутствует). Затем коснитесь поля и посмотрите, будет ли это проблемой. Если проблема не возникает, вам придется прикрепить некоторый JavaScript к своей странице, чтобы принудительно перерисовать/ретранслировать/переадресовать страницу после ее рендеринга.

Удачи. : \

Answer 2

Я нахожу решение этой ошибки. Я положил на элемент body css-свойство -webkit-overflow-scrolling: touch и когда я его удалил - все работает нормально.