it-swarm.com.ru

положение: исправлено, не работает на iPad и iPhone

Некоторое время я боролся с фиксированным позиционированием в iPad. Я знаю iScroll и это не всегда работает (даже в их демонстрации). Я также знаю, что у Сенчи есть решение для этого, но я не мог Ctrl + F исходный код для этого исправления.

Я надеюсь, что у кого-то может быть решение. Проблема заключается в том, что элементы с фиксированным расположением не обновляются, когда пользователь перемещается вверх/вниз на мобильном Safari с iOS.

128
Tower

Я закончил с использованием нового jQuery Mobile v1.1: http://jquerymobile.com/blog/2012/04/13/announcing-jquery-mobile-1-1-0/

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

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

6
Tower

Многие мобильные браузеры сознательно не поддерживают 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 и могу подтвердить, что она работает с фиксированной позицией. Есть проблемы с увеличением и панорамированием фиксированного элемента.

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

Он имеет актуальную информацию об Android, Opera (мини и мобильные) и iOS.

65
Spudley

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

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

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

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

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


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

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


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

37
Jonathan.

position: fixed работает на 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 до 4.0, вам также необходимо установить верхнюю позицию, или по какой-то причине будет добавлено небольшое поле.

22
Jason D.

теперь Apple поддерживает это

overflow:hidden;
-webkit-overflow-scrolling:touch;
17
Uğur Özpınar

Исправлен нижний колонтитул (здесь с 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}

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

14
Martin

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

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

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

EDIT - теперь я знаю, почему преобразование решает проблему: аппаратное ускорение. Добавление 3D-преобразования запускает ускорение графического процессора для плавного перехода. Более подробную информацию об аппаратном ускорении можно найти в этой статье: http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css

9
kenecaswell

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

7
Becario Senior

используя 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>

JQUERY

<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 touch в альбомной или портретной ориентации отображаться соответствующим образом.

<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>
1
abdullah

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

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

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

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

Я нашел причину этой причуды; что это событие прокрутки не воспроизводит Nice при использовании в сочетании с тегом 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>

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

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

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

1
Talvi Watia

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

window.scrollTo(window.scrollX, window.scrollY);
0
Eran Goldin