Как исправить проблему с сворачивающейся поисковой строкой в мобильных браузерах, на сайте есть кнопка по нажатию которой открывается на весь экран (не в полноэкранном режиме) картинка, в горизонтальном положении, я сделал что-то на подобии галереи, которая перелистывается не по горизонтали, а по вертикале. Так вот, у меня есть зависимость в .height() или .outerHeight() (в разработке использую jQuery 4.0.0), но если работа в браузерах компьютера у меня замечательная, то в мобильных браузерах с их новомодными решениями в плане скрытия или сжатия поисковой строки, вся красота ломается.
Причина в том, что свойства .height() или .outerHeight() будут изменяться в момент убирания поисковой строки или как в случае с height() значение будет статичным, но без учёта поисковой строки.
Нужно зафиксировать в раскрытом положение поисковую строку, при нажатие на кнопку в момент открытия картинки в родительском div - overlay.
Подобную реализацию видел на главной странице Яндекс у других была реализация с подгоном в момент изменения высоты, но мои попытки подогнать высоту под кран увенчались провалом.
Пробовал подобные методы
html {
height: 100%;
}
body {
position: fixed;
margin: 0;
padding: 0;
border: 0;
outline: 0;
background: 0 0;
-webkit-overflow-scrolling: touch;
overflow: hidden;
}
К сожалению не помогает, поисковая строка всё равно сужается или убирается, ломая тем самым DOM.
О какой поисковой строке идёт речь, ниже пример из браузера Яндекс
Такая же проблема присутствует в Opera, Safari, Huawei Browser и любой другой браузер, где присутствует подобный функционал у поисковой строки.
Буду рад любой помощи, даже малейшей! Писать готовый код или решение для меня не нужно (но не откажусь если от готового решения), главное дайте верный вектор и я сам справлюсь, возможно решение проблемы даже добавлю сюда.
