Deadzone в iPhone 6 Plus, Safari, iOS8. Нижняя область теряет интерактивность, когда вкладки видны
Я делаю веб-приложение и хочу использовать весь экран и избегать прокрутки, если это возможно. Там будут кнопки, которые нужно нажать во многих областях страницы.
Область в нижней части мобильного safari не является кликабельной, когда панель вкладок открыта, и я поворачиваюсь в книжную и обратно в альбомную.
Я установил высоту тела такой же, как у окна.innerHeight вместо 100%, так что мне не нужно прокручивать, чтобы добраться до кнопок внизу.
bodyEl.style.height = window.innerHeight + 'px';
Это может быть так что эта область не может использоваться для интерактивного контента.
Вот демо с кодом:
Http://plnkr.co/edit/327sUQ?p=preview
Вы должны иметь возможность открыть предварительный просмотр на iPhone 6 Plus, нажав на полноэкранную кнопку "Запустить предварительный просмотр в отдельном окне".
Обновление:
Это определенно похоже на ошибку в iOS8, она работает, как и ожидалось в iOS8. 4, 9.0 и 10.2 от моего симулятора.
3 ответа:
Я ищу решение для подобной задачи - это не ответ, а попытка объяснения.
Во - первых-в настоящее время я не могу подтвердить это поведение-похоже, что оно исправлено в iOS 8.4 (12H143). Не знаю точно, в каком варианте я видел его в последний раз.
Я пытаюсь объяснить, что я узнал (пока мы не решили больше не беспокоиться). Не кликабельная область не всегда является мертвой зоной. Если вы прокручиваете вверх, прежде чем нажать кнопку, велики шансы, что вы заставь его работать. Таким образом, я думаю, что (пустая) стандартная панель навигации есть (высота и поведение элементов похожи/одинаковы), даже если она пуста (все элементы перемещены в адресную строку) в ландшафтном режиме.
Кстати.: Есть еще одна (похожая) проблема с iPhone 6 plus (пока не исправлена). Если у вас есть элемент
position: fixedв верхней части веб-страницы, в ландшафтном режиме и только если открыты две или более вкладок (и панель вкладок видна), вы можете нажать кнопку через этот элемент (даже через кнопки) - как будто всего этого нет.
Я, возможно, нашел ответ на ваш вопрос, но хотел бы услышать, можете ли вы подтвердить. Настройка содержимого страницы на следующие стили:
overflow-y: scroll(позволяет прокручивать ниже окна просмотра, но только при необходимости по длине содержимого; значение по умолчанию -visible)-webkit-overflow-scrolling: touch(чтобы сгладить любое поведение прокрутки)В дополнение к вашему
height: 100%(который заставляет содержимое заполнять окно просмотра)Появляется для вызова меню iOS (вкладки и адресная строка вверху, а также навигационная строка внизу) в Safari, чтобы всегда появляться. Таким образом, щелчки по кнопкам в верхней и нижней части страницы больше не являются" мертвыми зонами " и будут работать вместо открытия меню Safari.
Я знаю, что этот вопрос немного устарел, но поскольку проблема все еще существует, я подумал, что должен поделиться своим опытом...
На данный момент нет решения проблемы, но есть обходной путь. Решение, предложенное jennz0r, может работать для некоторых, но мне не понравилась идея о том, что строка меню всегда отображается. Я видел сайт, на котором была решена эта проблема... ну, по крайней мере, это сработало. Я ничего не нашел в их css или js.
Так в чем же было исправление? поскольку "мертвая зона" составляет 44px в высота они просто сделали свой плавающий бар высотой 88px: D пользователи будут инстинктивно нажимать на верхнюю / центральную кнопку, и это почти всегда будет работать с первой попытки!
Другой обходной путь будет состоять в том, чтобы просто сделать кнопку/Панель плавающей 44px снизу.
" если это глупо, но это работает... это не глупо...";)