Bootstrap Modal не работает на устройствах iOS

Я работаю над сайтом с использованием Bootstrap и имею проблему, которую я не могу исправить. Вот проект сайта.

На панели "Что мы делаем" я сделал кликабельное модальное окно в первом окне эскизов (он говорит "Разработка корпоративного программного обеспечения" под миниатюрой). Если вы нажмете миниатюру на немобильном устройстве, появится всплывающее окно мода.

На настольном компьютере (или ноутбуке) он работает отлично. Но на iOS (iPhone, iPad и т.д.) Он вообще не работает: например, нажатие на него не вызывает модальное окно.

Однако, если вы посмотрите ниже на странице на панели "Кто мы", появится кнопка "Подробнее о тиме...". Если вы нажмете или коснитесь этой кнопки, она будет работать на всех устройствах (включая iOS).

Единственное различие, которое я вижу между ними, состоит в том, что первый из них имеет тег <div>, а второй - тегом <button>.

Не поддерживает ли Bootstrap запуск модального окна с <div> на устройстве iOS? Если это так, вы видите что-то не так с моим кодом, что приведет к его сбою только на устройствах iOS?

Ответ 1

Ответ Криса верен. Изменение div на button поможет прояснить вашу разметку. Если, однако, вам нужно сохранить одну и ту же разметку, вы также можете добавить cursor: pointer в свой элемент div, чтобы сафари знали, что это то, что можно щелкнуть. Это также позволяет пользователям мыши иметь стандартную визуальную подсказку, что элемент также можно щелкнуть.

Просто добавьте класс clickable, а затем включите следующий CSS:

.clickable {
    cursor: pointer;
}

Здесь также MCVE в Fiddle с исправлением

^{notice Я не использовал классы Bootstrap btn, потому что они автоматически добавят правило cursor.}

Ответ 2

Это не специфичный для Bootstrap, это общая проблема для iOS. По умолчанию многие неактивно-интерактивные элементы (например, <div> s) не изменяются на iOS. См. https://github.com/facebook/react/issues/134 и ссылки и последующие действия в них для получения более подробной информации.
Если возможно, используйте вместо этого <button> или <a>. A <div> для интерактивного элемента в любом случае не очень семантически.