С сафари iOS 11 входной курсор находится вне текстового поля ввода. Мы не поняли, почему у этого проблемы. Поскольку вы можете видеть, что мое сосредоточенное текстовое поле - это текстовый ввод электронной почты, но мой курсор находится за его пределами. Это происходит только с iOS 11 Safari
IOS 11 Модифицированная текстовая область загрузки Safari вне курсора
Ответ 1
Я исправил проблему, добавив position:fixed
к телу при открытии модального.
Надеюсь, это поможет вам.
Ответ 2
Лично position: fixed
прокрутите вверх автоматически. Довольно раздражает!
Чтобы избежать штрафа за другие устройства и версии, я применяю это исправление только к соответствующим версиям iOS.
Для javascript/jQuery
$(document).ready(function() {
// Detect ios 11_0_x affected
// NEED TO BE UPDATED if new versions are affected
var ua = navigator.userAgent,
iOS = /iPad|iPhone|iPod/.test(ua),
iOS11 = /OS 11_0_1|OS 11_0_2|OS 11_0_3|OS 11_1|OS 11_1_1|OS 11_1_2|OS 11_2|OS 11_2_1/.test(ua);
// ios 11 bug caret position
if ( iOS && iOS11 ) {
// Add CSS class to body
$("body").addClass("iosBugFixCaret");
}
});
Для CSS
/* Apply CSS to iOS affected versions only */
body.iosBugFixCaret.modal-open { position: fixed; width: 100%; }
UPDATE 1 Добавлена версия ОС 11.1, так как ошибка все еще находится в этой версии
Ответ 3
Эта проблема выходит за рамки Bootstrap и помимо Safari. Это полная ошибка отображения в iOS 11, которая встречается во всех браузерах. Исправление выше не устраняет эту проблему во всех случаях.
Об этом подробно сообщается здесь:
https://medium.com/@eirik.luka/how-to-fix-the-ios-11-input-element-in-fixed-modals-bug-aaf66c7ba3f8
Предположительно, они уже сообщили об этом Apple в качестве ошибки.
Ответ 4
Разочарование ошибки, спасибо за ее идентификацию. В противном случае я буду бить свой iphone или голову против стены.
Самое простое исправление (1 строка смены кода):
Просто добавьте следующий CSS в html или в внешний файл css.
<style type="text/css">
.modal-open { position: fixed; }
</style>
Вот полный рабочий пример:
.modal-open { position: fixed; }
<link href="https://getbootstrap.com/docs/3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel">New message</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="control-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="control-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://getbootstrap.com/docs/3.3/dist/js/bootstrap.min.js"></script>
Ответ 5
Самое простое/чистое решение:
body.modal-open { position: fixed; width: 100%; }
Ответ 6
Добавьте position: fixed;
в body
, когда модальная функция открыта.
$(document).ready(function($){
$("#myBtn").click(function(){
$("#myModal").modal("show");
});
$("#myModal").on('show.bs.modal', function () {
$('body').addClass('body-fixed');
});
$("#myModal").on('hide.bs.modal', function () {
$('body').removeClass('body-fixed');
});
});
.body-fixed {
position: fixed;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-info btn-lg" id="myBtn">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Form</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label class="control-label">Input #1</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label class="control-label">Input #2</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label class="control-label">Input #3</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label class="control-label">Input #4</label>
<input type="text" class="form-control">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Ответ 7
Если кто-то ищет исправление в vanilla js, которое работает на IOS > 11.2 и не требует каких-либо дополнительных CSS:
(function() {
if (!/(iPhone|iPad|iPod).*(OS 11_[0-2]_[0-5])/.test(navigator.userAgent)) return
document.addEventListener('focusin', function(e) {
if (!e.target.tagName == 'INPUT' && !e.target.tagName != 'TEXTAREA') return
var container = getFixedContainer(e.target)
if (!container) return
var org_styles = {};
['position', 'top', 'height'].forEach(function(key) {
org_styles[key] = container.style[key]
})
toAbsolute(container)
e.target.addEventListener('blur', function(v) {
restoreStyles(container, org_styles)
v.target.removeEventListener(v.type, arguments.callee)
})
})
function toAbsolute(modal) {
var rect = modal.getBoundingClientRect()
modal.style.position = 'absolute'
modal.style.top = (document.body.scrollTop + rect.y) + 'px'
modal.style.height = (rect.height) + 'px'
}
function restoreStyles(modal, styles) {
for (var key in styles) {
modal.style[key] = styles[key]
}
}
function getFixedContainer(elem) {
for (; elem && elem !== document; elem = elem.parentNode) {
if (window.getComputedStyle(elem).getPropertyValue('position') === 'fixed') return elem
}
return null
}
})()
Что это такое:
- Проверьте, включен ли браузер Safari в iOS 11.0.0 - 11.2.5
- Прослушать любые события
focusin
на странице - Если сфокусированный элемент является
input
илиtextarea
и содержится в элементе с позициейfixed
, измените положение контейнера наabsolute
, а в отношенииscrollTop
и исходных размеров контейнеров. - При размытии восстановите позицию контейнера до
fixed
.
Ответ 8
Попробуйте viewport-fit = cover для мета-видового экрана.
Посмотрите на это: https://ayogo.com/blog/ios11-viewport/
Ответ 9
Отменить модальный css и изменить его position
от fixed
до absolute
.modal {
position: absolute !important;
}
Ответ 10
Как упоминалось в качестве джентльмена, установка тела в положение: фиксированное автоматически заставляет страницу прокручивать вверх. Установка положения контейнера в абсолютное приведет к тому, что последний появится в верхней части своего ближайшего расположенного предка или тела, поэтому, если пользователь прокрутил вниз, он может даже не видеть модальный.
Решение заключалось бы в том, чтобы установить положение тела на фиксированное и передать scrollTop в верхнее или крайнее CSS-свойство тела после исправления. При закрытии модальности выполните противоположную операцию для извлечения scrollTop, на котором пользователь находился до открытия модального.
JS
var scroll = $(document).scrollTop();
$("body").css("top", -scroll);
$("body").addClass("modal-open");
/* open modal */
[...]
$("body").css("top", "0");
$("body").removeClass("modal-open");
$(document).scrollTop(scroll);
/* remove modal */
CSS
body.modal-open {
overflow: hidden;
height: 100%;
width: 100%;
position: fixed;
}
Нет необходимости проверять устройства iOS, поскольку этот трюк должен исправить ошибку iOS и работать на всех устройствах.
Ответ 11
Проблема, как многие люди описали, связана с:
position:fixed
Теперь, если вы откроете модальный, вы будете брошены в заголовок страницы... Чтобы избежать этого, я использую это решение (рядом с @Will's).
Сначала убедитесь, что устройство iOS:
var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
Если устройство iOS - добавьте класс iOS-устройства в тело:
if (iOS) {
$('body').addClass('iOS-device');
}
Сделать переменную для сохранения положения прокрутки:
var scrollPosition;
Теперь обнаруживаем событие show.bs.modal и устанавливаем верхнее свойство iOS-устройства для отрицательного scrollPosition:
$('.modal').on('show.bs.modal', function() {
scrollPosition = $(window).scrollTop();
$('.iOS-device').css('top', -scrollPosition);
});
Затем определите событие hide.bs.modal, удалите класс modal-open, reset верхнее значение iOS-устройства и прокрутите документ до момента, когда он был до того, как модальный был открыт:
$('.modal').on('hide.bs.modal', function() {
$('.iOS-device').removeClass('modal-open');
$('.iOS-device').css('top', 0);
$(document).scrollTop(scrollPosition);
});
И полный код:
( function() {
var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if (iOS) {
$('body').addClass('iOS-device');
}
var scrollPosition;
$('.modal').on('show.bs.modal', function() {
scrollPosition = $(window).scrollTop();
$('.iOS-device').css('top', -scrollPosition);
});
$('.modal').on('hide.bs.modal', function() {
$('.iOS-device').removeClass('modal-open');
$('.iOS-device').css('top', 0);
$(document).scrollTop(scrollPosition);
});
})();
CSS
body.modal-open.iOS-device {
position: fixed;
width: 100%;
}
Ответ 12
добавить в #modal позицию: абсолютный он исправить будущие проблемы, связанные с позицией: fixed
Ответ 13
Для такого рода проблем мы нашли следующие 3 решения
1) Измените контейнер с position: fixed;
на position: absolute;
. Недостатком этого является то, что пользователь может легко прокрутить прочь от модального, который мы хотели бы взять на себя в первую очередь в области недвижимости.
2) Вы могли бы утверждать, что модалы не работают также на небольших экранах, и лучшим обходным решением было бы не использовать модалы вообще, но это было бы довольно большой перепиской в нашем случае, и нам нужно было исправить как можно скорее.
3) То, что мы нашли лучшим решением в нашем случае, - это сохранить модальный фиксированный, но растянуть его по краям окна, скрывая остальную часть содержимого в теле с помощью display: none;
. Это позволит устранить проблему роста тела выше, чем область просмотра, и при фокусировке на входе не будет фоновой прокрутки.