(ПРИМЕЧАНИЕ: Обновления 1-5 ниже)
У меня есть отзывчивая веб-страница на основе Twitter-Bootstrap, а в верхнем левом углу страницы есть зона прямоугольной формы, которая полностью мертва, но только на Mobile Safari (я не тестировал на Android).
Мертвый, определенный:
- Невозможно щелкнуть по кнопкам в мертвой зоне.
- Прокрутка вверх/вниз в мертвой зоне не прокручивает страницу вверх/вниз.
Я добавил следующий код:
$('*').click(function(){
console.log($(this));
});
... и когда я активировал консоль JS для мобильных сафари, я заметил, что мертвая зона была сдвинута вверх, равная высоте пикселя консоли.. То есть мертвая зона уменьшилась. Кроме того, консоль регистрировала все клики кроме для тех, которые выполнялись в мертвой зоне.
ОБНОВЛЕНИЕ # 1:
По рекомендации от комментариев I...
1) Дважды проверенные фиксированные позиции:
$('*').click(function() {
console.log('checking for fixed elements...');
$('*').each(function() {
if ($(this).css('position') == 'fixed') {
console.log($(this));
}
})
});
... оказалось, что мои ботастровые модальные диалоги были фиксированной позицией на мобильном телефоне. Я удалил все диалоги и проблема сохранилась.
2) Добавлен следующий код CSS....
* { outline: 1px solid red; }
Вот скриншот iPhone. (Синяя рамка, которую я добавил впоследствии в Photoshop, чтобы приблизиться к мертвой зоне)...
ОБНОВЛЕНИЕ # 2: ОК, это смешно. Я начал снимать материал с моего кода. Это то, что у меня получилось, и проблема не устранена!...
<html>
<head>
</head>
<body>
</body>
</html>
ОБНОВЛЕНИЕ # 3. Вероятно, это ошибка сафари и не имеет никакого отношения к моей веб-странице. (см. обновление № 2 ниже). Я принудительно закрыл сафари, и при повторном открытии проблема исчезла.
ОБНОВЛЕНИЕ # 4: проблема появилась снова:( Может быть, это моя веб-страница, а не фейерверк Safari. Однако это кажется случайным... Сила закрытия браузера будет исправлена на какое-то время, пока он не вернется снова.
ОБНОВЛЕНИЕ # 5. Когда появится мертвая зона, после перехода на другую веб-страницу мертвая зона все еще существует.