Прямоугольник смерти - мобильный сафари

(ПРИМЕЧАНИЕ: Обновления 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, чтобы приблизиться к мертвой зоне)...

dead-zone screenshot

ОБНОВЛЕНИЕ # 2: ОК, это смешно. Я начал снимать материал с моего кода. Это то, что у меня получилось, и проблема не устранена!...

<html>
<head>
</head> 
<body>


</body>
</html>

ОБНОВЛЕНИЕ # 3. Вероятно, это ошибка сафари и не имеет никакого отношения к моей веб-странице. (см. обновление № 2 ниже). Я принудительно закрыл сафари, и при повторном открытии проблема исчезла.

ОБНОВЛЕНИЕ # 4: проблема появилась снова:( Может быть, это моя веб-страница, а не фейерверк Safari. Однако это кажется случайным... Сила закрытия браузера будет исправлена на какое-то время, пока он не вернется снова.

ОБНОВЛЕНИЕ # 5. Когда появится мертвая зона, после перехода на другую веб-страницу мертвая зона все еще существует.

Ответы

Ответ 1

Есть только около миллиона возможностей для этой проблемы. Я бы начал с подключения вашего устройства к компьютеру и открытия Safari. убедитесь, что режим разработки включен в ваших предпочтениях. В меню разработки выберите свое устройство и проверьте элементы. Удивительно, что вы сможете найти. Начните с добавления "display: none" к каждому элементу, пока не найдете, что ваша проблема.

enter image description here

enter image description here

enter image description here

Ответ 2

Вы полностью удалили все модалы? у меня была проблема, подобная этой, прежде чем проблема заключалась в том, что мои модалы, в которых кладется класс, скрываются, без этого модально просто исчезает до непрозрачности 0

Пример: class= "модальное скрытие исчезает"

Ответ 3

Попробуйте установить для свойства проблемы следующее свойство CSS:

<selector> {
   pointer-events: all; 
}

где <selector> обозначает селектор элементов, о котором идет речь