Здравствуйте!
Есть сайт, который находится в процессе разработки
http://экскурсионная.москваОжидаемое поведение:
На сайте есть экскурсии. Каждую экскурсию можно заказать нажатием на кнопку "Заказать экскурсию" под экскурсией:
После нажатия этой кнопки появляется вот такое вот Popup-окно:
Проблема:
Проблема проявляется именно на мобильных устройствах.
Суть в том, что на тефоне Popup-окно появляется, но
с нулевой прозрачностью, хотя в сss строго указано opacity:1 (я убедился в этом, выведя отладочную информацию о прозрачности alert()).
Проблема в том, что после нажатия кнопки "заказать экскурсию" в мобильной версии браузера, ни одна кнопка на сайте не работает, так как поверх всего сайта появляется прозрачное popup-окно.
Как результат проблемы:
При попытке нажать на кнопку "заказать экскурсию", в телефоне активируется клавиатура. Дело в том, что над всем сайтом "висит" прозрачное popup-окно. И получается так, что прозрачный инпут находится ровно над той кнопкой.
Также я могу "вслепую" нажимать на кнопки в том самом Popup-окне. Например, если я долго буду тыкать по экрану, то я могу попасть по кнопке закрытия Popup-окна и оно закроется.
Что я делал:- Я добавлял свойство opacity с important со всеми возможными префиксами
- Устанавливал opacity через Js
Замечание:
Если мы выполним следующую команду:
alert(getComputedStyle(popup).opacity)
То в выводе мы получим 1!
Как такое возможно?! Почему opacity 1 и я его не вижу
CSS селектор popup-окна:
Если вы захотите посмотреть на тот чудо блок, то можете получить его выполнив следующую команду:
document.querySelectorAll(".t-popup")[1]
Заранее выражаю огромную благодарность всем, кто поможет.
Простой
Простой
