Я обнаружил странное поведение при использовании CSS-модема Materialise в Firefox (66.0.1). Он отлично работает в Chrome (73.0.3683.86) и MS Edge (где вы найдете версию?). Я использую Windows 10. Это также делается с помощью модальной демонстрации на официальном веб-сайте Materialise CSS.
Проблема, кажется, начинается, если вы отображаете модальное с достаточным количеством контента, чтобы он отображал вертикальную полосу прокрутки. Он должен иметь ссылки или кнопки, чтобы увидеть проблему, которую я опишу. Вы можете смоделировать это, изменив размер Firefox так, чтобы его вертикальная высота была достаточно маленькой, чтобы появилась полоса прокрутки. Теперь закройте модал. Затем измените размер Firefox так, чтобы модальное изображение отображалось без полос прокрутки. Откройте модал и наведите курсор мыши на ссылку или кнопку, и любой эффект наведения, который должен произойти, этого не делает. Нажмите один раз на любую ссылку или кнопку, и ничего не происходит. Нажмите второй раз, и он работает правильно.
И даже более того, после открытия первого модального с помощью полосы прокрутки, вы можете открыть второй без полосы прокрутки и ничего не делать в течение 15 секунд, а затем ссылки или кнопки будут работать нормально.
Когда это произошло, я попытался щелкнуть правой кнопкой мыши по кнопке, чтобы «проверить элемент» в Инспекторе Firefox. Вместо того, чтобы получить кнопку, я получил модальный оверлейный элемент позади нее. Обратите внимание, что когда это происходит, наложение не находится над кнопкой или любым модальным содержимым. Это не проблема z-index. Чтобы увидеть, была ли это проблема с оверлеем, я добавил функцию onOpenEnd () к модальным опциям, которая удаляла оверлей, как только модал открывался. У меня такая же проблема. Когда я снова попытался открыть его в инспекторе, я получил то, что было за кнопкой. Так что, похоже, модального даже нет, пока я сначала не нажму на модальное поле или не подожду 15 секунд.
Затем я попытался добавить некоторый код в функцию onOpenEnd (), который бы фокусировал кнопку, но безрезультатно. Я попытался нажать на кнопку, но это тоже не сработало.
Непосредственно перед отправкой я нашел еще одну часть головоломки. Как я уже сказал, при наведении курсора на кнопки не будет отображаться обычный указатель наведения. Но если я наведусь выше и чуть левее от кнопок, курсор изменится. Когда я нажимаю там, цвет кнопок меняется, как если бы на них нажимали, но действие (закрытие модального) не происходит. Hmmmmm ....
Если вы хотите проверить это, перейдите на веб-сайт Materialise CSS и откройте страницу для модальных действий. (https://materializecss.com/modals.html) Уменьшите вертикальный размер Firefox, чтобы при открытии демо-модала у него была вертикальная полоса прокрутки. Теперь закройте модал. Измените размер Firefox до нормальной вертикальной высоты и снова откройте модал. Наведите курсор на Согласие или Не соглашайтесь с кнопками, и вы не получите курсор указателя. Попробуйте щелкнуть один раз, и ничего не произойдет. Нажмите еще раз, и модальный режим закроется. Или подождите 15 секунд, а затем кнопки сработают.
У большинства моих пользователей модальный режим будет открыт более 15 секунд, так что это не большая проблема. Но иногда они открывают его, чтобы просто что-то проверить, а затем хотят его закрыть. Конечно, они могут щелкнуть дважды, но я бы предпочел, чтобы это работало правильно. Chrome и Edge работают нормально. Firefox нет. Кто-нибудь может подумать о том, что вызывает это, и могу ли я что-нибудь сделать в своем коде, чтобы заставить его работать должным образом? Спасибо.