Почему моя позиция: липкая не работает на iOS? - PullRequest
Новая
       9

Почему моя позиция: липкая не работает на iOS?

0 голосов
/ 12 февраля 2019

Я нахожусь в процессе кодирования липкой панели уведомлений, расположенной внизу экрана мобильного устройства.Я хочу, чтобы панель застряла в нижней части экрана пользователя, пока пользователь не достиг позиции прокрутки того места, где строка фактически расположена в коде (который находится непосредственно перед нижним колонтитулом страницы).Я в значительной степени скопировал пример «доктора» со этой страницы: https://alligator.io/css/position-sticky/ Моя проблема: на моей странице панель работает нормально при использовании устройств Android или при моделировании мобильного устройства путем настройки ширины браузера на рабочем столеКомпьютер.Тем не менее, в iOS панель не является липкой, то есть она просто сидит на своем месте и не прилипает к нижней части экрана, пока не достигнет.Это относится как к Safari, так и к Google Chrome.Странная вещь: на ранее упомянутой странице alligator.io она прекрасно работает на моем устройстве iOS.

Я подозреваю, что это какая-то проблема Webkit, связанная с кодом, окружающим панель, но яне может изолировать это.Я попытался отладить, настроив мой код, насколько это возможно, к примеру из alligator.io, но я не могу заставить его работать.Я также попытался найти любое переполнение: авто в родительских элементах - без успеха.Я пытался исправить это в течение нескольких часов, и я устал от этой проблемы и мог использовать другую пару глаз, чтобы помочь мне найти то, что я пропускаю. 

<a href="#" class="jobAlertToggle">
    <div id="jobalarm_mobile">
        <i class="fa fa-bell"></i>
        <span>Jobalarm aktivieren</span>
        <label class="switch">
            <input type="checkbox">
            <span class="slider round"></span>
        </label>
    </div>
</a>

#jobalarm_mobile {
    display: table;
    font-size: 18px;
    width: 100%;
    height: 40px;
    background: #ff8400;
    color: white;
    font-weight: 400;
    text-align: center;
    position: -webkit-sticky;
    position: sticky;
    bottom: -50px;
    align-self: flex-end;
}

Вы можете посетить страницу в реальном времениЯ работаю в (скрыто по запросу клиента, пожалуйста, свяжитесь со мной в частном порядке).Просто запустите любой (предложенный) поиск, и появится панель (или нет, если вы используете iOS ...) Заранее спасибо за помощь.

Ответы [ 3 ]

0 голосов
/ 12 февраля 2019 
i visit the website may be i found solution for you 
try this its may can help you:

//firstly remove
 //you repeat that in your code

        #jobalarm_mobile {
             display: none !important;       
        }

, а затем поместите в конец тег <a> уведомления (после тега <footer>) 

//write this css
     .jobAlertToggle{
              display: none;
           }
        @media (max-width: 767px)
          .jobAlertToggle{
              display: block;
              width: 100%;
              position:sticky;
              position:-webkit-sticky;
              bottom:-50px;
           }

          #jobalarm_mobile {
               display: table;
               font-size: 18px;
               width: 100%;
               height: 40px;
               background: #ff8400;
               color: white;
               font-weight: 400;
               text-align: center;
               -webkit-align-self: flex-end;
               align-self: flex-end;
           }
0 голосов
/ 12 февраля 2019

Я чувствую себя идиотом, когда отвечаю на свой вопрос, но я выяснил, в чем причина проблемы.Я надеюсь, что это поможет разработчикам, столкнувшимся с той же проблемой, потому что я не смог найти нигде, определяющий это поведение.

Как вы можете видеть, в моем коде есть обертка (в частности, ссылка) вокруг элемента, на которомЯ использую свою позицию: sticky: 

<a href="#" class="jobAlertToggle">
<div id="jobalarm_mobile">
    <i class="fa fa-bell"></i>
    <span>Jobalarm aktivieren</span>
    <label class="switch">
        <input type="checkbox">
        <span class="slider round"></span>
    </label>
</div>
</a>

Почему-то это не проблема для Chrome или Firefox на рабочем столе, а также для Android, так как они, похоже, игнорируют этот контейнер, возможно, потому что он этого не делаетопределить любое поведение позиционирования.Вот почему он работает на других устройствах.Тем не менее, iOS не игнорирует контейнер и поэтому позиционирует div относительно его родительского контейнера, который является ссылкой.После удаления ссылки в тестовых целях она работала на всех устройствах.

0 голосов
/ 12 февраля 2019

Думаю, проблема в том, что Safari (браузер iOS) не поддерживает position: sticky должным образом. См. Эту статью (https://caniuse.com/#feat=css-sticky). Прочтите раздел Известные проблемы , чтобы найти aut more. Возможно, вам придется отключить его для iOS и показать на своей странице примечание, что оно не работает должным образом.

Надеюсь, я смогу вам помочь.

...