Позиция: исправлено не работает на iPad и iPhone

Ответ 1

В итоге я использовал новый jQuery Mobile v1.1: http://jquerymobile.com/blog/2012/04/13/announcing-jquery-mobile-1-1-0/

Теперь у нас есть твердая перезапись, которая предоставляет истинные фиксированные панели инструментов на множество популярных платформ и безопасно возвращается к статической панели инструментов позиционирование в других браузерах.

Самая крутая часть этого подхода заключается в том, что, в отличие от JS-based решения, которые налагают неестественную физику прокрутки во всех платформы, наша прокрутка кажется 100% родной, потому что она есть. Это означает эта прокрутка ощущается везде и работает с прикосновением, колесиком мыши и пользовательский ввод клавиатуры. В качестве бонуса наше решение на основе CSS супер легкий и не влияет на совместимость или доступность.

Ответ 2

Многие мобильные браузеры намеренно не поддерживают position:fixed; на том основании, что фиксированные элементы могут мешать на маленьком экране.

Сайт Quirksmode.org имеет очень хорошее сообщение в блоге, которое объясняет проблему: http://www.quirksmode.org/blog/archives/2010/12/the_fifth_posit.html

Также см. эту страницу для диаграммы совместимости, в которой поддерживаются мобильные браузеры position:fixed;: http://www.quirksmode.org/m/css.html

(но обратите внимание, что мир мобильных браузеров движется очень быстро, поэтому такие таблицы могут не оставаться актуальными надолго!)

Обновление: Как сообщается, у iOS 5 и Android 4 есть позиция: фиксированная поддержка сейчас.

Я сам тестировал iOS 5 в магазине Apple сегодня и могу подтвердить, что он работает с фиксированной позицией. Есть проблемы с масштабированием и панорамированием вокруг фиксированного элемента.

Я нашел эту таблицу совместимости намного более актуальной и полезной, чем quirksmode: http://caniuse.com/#search=fixed

В нем есть обновленная информация об Android, Opera (мини и мобильном телефоне) и iOS.

Ответ 3

Фиксированное позиционирование не работает на iOS, как на компьютерах.

Представьте, что у вас есть лист бумаги (веб-страница) под увеличительным стеклом (видовое окно), если вы перемещаете увеличительное стекло и ваш глаз, вы видите другую часть страницы. Вот как работает iOS.

Теперь есть лист прозрачного пластика со словом на нем, этот лист пластика остается неподвижным независимо от того, что (позиция: неподвижные элементы). Поэтому, когда вы перемещаете увеличительное стекло, неподвижный элемент появляется для перемещения.

В качестве альтернативы вместо перемещения увеличительного стекла вы перемещаете бумагу (веб-страницу), сохраняя лист пластика и увеличительное стекло. В этом случае слово на листе пластика будет оставаться фиксированным, а остальная часть содержимого будет перемещаться (потому что это на самом деле). Это традиционный настольный браузер.

Итак, в iOS перемещается область просмотра, в традиционном браузере веб-страница перемещается. В обоих случаях фиксированные элементы остаются на самом деле; хотя на iOS фиксированные элементы перемещаются.

Чтобы обойти это, нужно следовать последним параграфам в этой статье

(в основном отключить прокрутку в целом, иметь содержимое в отдельном прокручиваемом div (см. синий квадрат в верхней части связанной статьи), а фиксированный элемент помещен абсолютно)

"position: fixed" теперь работает так, как вы ожидали бы в iOS5.

Ответ 4

позиция: исправлено работает на android/iphone для вертикальной прокрутки. Но вам нужно убедиться, что ваши метатеги полностью установлены. например

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

Также, если вы планируете использовать ту же страницу для android pre 4.0, вам также нужно установить верхнюю позицию, или по какой-то причине будет добавлен небольшой запас.

Ответ 5

теперь поддержка apple, которая

overflow:hidden;
-webkit-overflow-scrolling:touch;

Ответ 6

Фиксированный Нижний колонтитул (здесь с jQuery):

if (navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod' || navigator.platform == 'Linux armv6l') 
{
    window.ontouchstart = function () 
    {
        $("#fixedDiv").css("display", "none");
    }

    window.onscroll = function() 
    { 
        var iPadPosition = window.innerHeight + window.pageYOffset-45; // 45 is the height of the Footer
         $("#fixedDiv").css("position", "absolute");
         $("#fixedDiv").css("top", iPadPosition);
         $("#fixedDiv").css("display", "block");
    }
}

// in the CSS file should stand:
#fixedDiv {position: fixed; bottom: 0; height: 45px;  whatever else}

Надеюсь, что это поможет.

Ответ 7

У меня была эта проблема в Safari (iOS 10.3.3) - браузер не перерисовывался, пока не произошло событие touchend. Фиксированные элементы не появлялись или были обрезаны.

Уловка для меня была в добавлении transform: translate3d (0,0,0); на мой элемент фиксированной позиции.

.fixed-position-on-mobile {
  position: fixed;
  transform: translate3d(0,0,0);
}

РЕДАКТИРОВАТЬ - теперь я знаю, почему преобразование решает проблему: аппаратное ускорение. Добавление 3D-преобразования запускает ускорение графического процессора для плавного перехода. Подробнее о проверке аппаратного ускорения читайте в этой статье: http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css.

Ответ 8

Избегайте использования одного и того же блока с помощью transform: --- и position: fixed. Элемент останется в положении: статический, если есть какое-либо преобразование.

Ответ 9

используя jquery, я могу придумать это. он не прокручивает гладко, но это делает трюк. вы можете прокручивать вниз, и фиксированный div появляется вверху.

CSS

<style type="text/css">
    .btn_cardDetailsPg {height:5px !important;margin-top:-20px;}
    html, body {overflow-x:hidden;overflow-y:auto;}
    #lockDiv {
  background-color: #fff;
  color: #000;
  float:left;
  -moz-box-shadow: 0px 4px 2px 2px #ccc;-webkit-box-shadow: 0px 4px 2px 2px #ccc;box-shadow:0px 4px 2px 2px #ccc;
  }
#lockDiv.stick {
  position: fixed;
  top: 0;
  z-index: 10000;
  margin-left:0px;
  }
</style>

HTML

<div id="lockSticky"></div>
<div id="lockDiv">fooo</div>

ЗОНА

<script type="text/javascript">
    function sticky_relocate() {
        var window_top = $(window).scrollTop();
        var div_top = $('#lockSticky').offset().top;
        if (window_top > div_top)
            $('#lockDiv').addClass('stick')
        else
            $('#lockDiv').removeClass('stick');
    }
    $(function() {
        $(window).scroll(sticky_relocate);
        sticky_relocate();
    });
</script>

Наконец, мы хотим определить, будет ли касаться iPod в ландшафтном или портретном режиме соответственно.

<script type="text/javascript">
    if (navigator.userAgent.match(/like Mac OS X/i)) {
        window.onscroll = function() {

        if (window.innerWidth > window.innerHeight) {
            //alert("landscape [ ]");
            document.getElementById('lockDiv').style.top =
            (window.pageYOffset + window.innerHeight - 268) + 'px';
        }

        if (window.innerHeight > window.innerWidth) {
            //alert("portrait ||");
            document.getElementById('lockDiv').style.top =
            (window.pageYOffset + window.innerHeight - 418) + 'px';
        }
        };
    }
</script>

Ответ 10

Даже несмотря на то, что атрибут CSS {position:fixed;} кажется (в основном) работает на более новых устройствах iOS, возможно, устройство причудливо и откидывается на {position:relative;} иногда и без причины или причины. Обычно очистка кеша поможет, пока что-то не произойдет, и причуда повторится.

В частности, от самого Apple Подготовка вашего веб-контента для iPad:

Safari на iPad и Safari на iPhone не имеет изменяемых размеров окон. В Safari на iPhone и iPad, размер окна установлен на размер экран (минус элементы интерфейса пользовательского интерфейса Safari) и не может быть изменен пользователем. Чтобы перемещаться по веб-странице, пользователь меняет уровень масштабирования и положение окна просмотра, когда они дважды касаются или зажимают, чтобы увеличить или или прикосновением и перетаскиванием для панорамирования страницы. По мере изменения пользователем уровень масштабирования и положение окна просмотра, которое они делают в пределах область видимого содержимого фиксированного размера (то есть окно). Это означает элементы веб-страницы, которые имеют "фиксированную" позицию в области просмотра может выйти за пределы области видимого содержимого, вне экрана.

Что иронично, устройства Android, похоже, не имеют этой проблемы. Также вполне возможно использовать {position:absolute;}, если ссылаться на тег тела и не иметь никаких проблем.

Я нашел основную причину этой причуды; что это событие прокрутки не играет приятной при использовании в сочетании с тегом HTML или BODY. Иногда ему не нравится запускать событие, или вам придется подождать, пока событие свинг-свитка не завершится, чтобы принять событие. В частности, окно просмотра перерисовывается в конце этого события, и фиксированные элементы могут быть перемещены в другое место в окне просмотра.

Так вот что я делаю: (избегайте использования видового экрана и придерживайтесь DOM!)

<html>
  <style>
    .fixed{
      position:fixed;
      /*you can set your other static attributes here too*/
      /*like height and width, margin, etc.*/
      }
    .scrollableDiv{
      position:relative;
      overflow-y:scroll;
      /*all children will scroll within this like the body normally would.*/
      } 
    .viewportSizedBody{
      position:relative;
      overflow:hidden;
      /*this will prevent the body page itself from scrolling.*/
      } 
  </style>
  <body class="viewportSizedBody">
    <div id="myFixedContainer" class="fixed">
       This part is fixed.
    </div>
    <div id="myScrollableBody" class="scrollableDiv">
       This part is scrollable.
    </div>
  </body>
  <script type="text/javascript" src="{your path to jquery}/jquery-1.7.2.min.js"></script>
  <script>
    var theViewportHeight=$(window).height();
    $('.viewportSizedBody').css('height',theViewportHeight);
    $('#myScrollableBody').css('height',theViewportHeight);
  </script>
</html>

В сущности это приведет к тому, что BODY будет размером с окном просмотра и не прокручивается. Прокручиваемый DIV, вложенный внутри, будет прокручиваться, как обычно, BODY (минус эффект качания, поэтому прокрутка останавливается на касании). Фиксированный DIV остается неподвижным без помех.

В качестве побочного примечания, высокое значение z-index на фиксированном DIV важно, чтобы сохранить прокручиваемую DIV за ней. Я обычно добавляю в изменение размера окна и прокручиваю события также для кросс-браузерной и альтернативной совместимости с разрешением экрана.

Если все остальное не работает, приведенный выше код также будет работать как с фиксированными, так и с прокручиваемыми DIV, установленными на {position:absolute;}.

Ответ 11

Простой способ решить эту проблему - просто ввести свойство transform для вашего элемента. и это будет исправлено. Удачного кодирования :-)

.classname{
  position: fixed;
  transform: translate3d(0,0,0);
}

Кроме того, вы можете попробовать его путь, это тоже хорошо работает.

.classname{
      position: -webkit-sticky;
    }

Ответ 12

В моем случае прокрутка показала элемент position: fixed, который изначально не показывался при добавлении в DOM. Поэтому я просто вручную вызвал событие прокрутки, которое, в свою очередь, вызвало перерисовку и вуаля.

window.scrollTo(window.scrollX, window.scrollY);

Ответ 13

вот мое решение этого...

CSS

#bgimg_top {
    background: url(images/bg.jpg) no-repeat 50% 0%; 
    position: fixed; 
    top:0; 
    left: 0; 
    right:0 ; 
    bottom:0;
}

HTML

<body>
<div id="bgimg_top"></div>
....
</body>

Объяснение заключается в том, что позиция, зафиксированная для div, всегда будет держать div на фоне, тогда мы растягиваем div, чтобы идти по всем углам браузера (при условии, что край тела = 0), используя (слева, справа, сверху, снизу).

Пожалуйста, убедитесь, что вы не используете ширину и высоту, так как это переопределит верхние, левые, правые, нижние параметры.