pozycja: fixed nie działa na iPadzie i iPhonie

Wiele przeglądarek mobilnych celowo nie obsługuje position:fixed; ze względu na to, że stałe elementy mogą wchodzić w drogę na małym ekranie.

The Quirksmode.org strona ma bardzo dobry wpis na blogu, który wyjaśnia problem: http://www.quirksmode.org/blog/archives/2010/12/the_fifth_posit.html

Zobacz również na tej stronie Wykres zgodności pokazujący, które przeglądarki mobilne obsługują position:fixed;: http://www.quirksmode.org/m/css.html

(ale zauważ, że komórka świat przeglądarek porusza się bardzo szybko, więc tabele takie jak ten mogą nie być aktualne na długo!)

Update: iOS 5 i Android 4 są zgłaszane do pozycji: stałe wsparcie teraz.

Przetestowałem iOS 5 osobiście w sklepie Apple Store i mogę potwierdzić, że działa z ustaloną pozycją. Istnieją jednak problemy z powiększaniem i przesuwaniem wokół ustalonego elementu.

Znalazłem tę tabelę zgodności znacznie bardziej aktualną i przydatną niż quirksmode jeden: http://caniuse.com/#search=fixed

Posiada aktualne informacje na Android, Opera (mini i mobile) i iOS.

Stałe pozycjonowanie nie działa na iOS tak jak na komputerach.

Wyobraź sobie, że masz kartkę papieru (stronę internetową) pod lupą( wizjerem), jeśli przesuniesz lupę i oko, zobaczysz inną część strony. Tak działa iOS.

Teraz jest arkusz przezroczystego plastiku z napisem na nim, ten arkusz plastiku pozostaje nieruchomy bez względu na wszystko (pozycja: elementy stałe). Więc po przesunięciu lupy stały element pojawia się , aby przenieść.

Alternatywnie, zamiast przesuwać szkło powiększające, przesuwasz papier (stronę internetową), utrzymując arkusz plastiku i szkło powiększające w miejscu. W tym przypadku słowo na arkuszu plastiku wydaje się pozostać stałe, a reszta treści wydaje się poruszać (ponieważ w rzeczywistości jest) jest to tradycyjna przeglądarka pulpitu.

Więc w iOS przesuwa się viewport, w tradycyjnej przeglądarce przesuwa się strona internetowa. W obu przypadkach elementy stałe pozostają nieruchome w rzeczywistości; chociaż na iOS stałe elementy wydają się poruszać.

Aby to obejść, należy postępować zgodnie z kilkoma ostatnimi akapitami w ten artykuł

(zasadniczo wyłącz przewijanie w całości, miej zawartość w osobnym przewijalnym div (patrz niebieskie pole na górze połączonego artykułu), a stały element umieszczony absolutnie)

"position: fixed" działa teraz tak, jak można się spodziewać w iOS5.

Pozycja: Naprawiono działa na Androidzie/iPhonie do przewijania w pionie. Ale musisz upewnić się, że metatagi są w pełni ustawione. e. g

<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">

Również jeśli planujesz mieć tę samą stronę pracy na Androidzie pre 4.0, trzeba ustawić górną pozycję również, lub mały margines zostanie dodany z jakiegoś powodu.

Teraz Apple obsługuje to

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

Miałem ten problem na Safari (iOS 10.3.3) - przeglądarka nie była przerysowywana do czasu wywołania zdarzenia touchend. Elementy stałe nie pojawiły się lub zostały odcięte.

Trick dla mnie polegał na dodaniu transform: translate3d(0,0,0); do elementu o stałej pozycji.

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

EDIT - Teraz wiem, dlaczego transformacja rozwiązuje problem: akceleracja sprzętowa. Dodanie transformacji 3D powoduje przyspieszenie GPU, które zapewnia płynne przejście. Więcej na temat akceleracji sprzętowej ten artykuł: http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css.

Poprawiona Stopka (tutaj z 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}

Unikaj na tym samym polu używając transform: - - - i position: fixed. Element pozostanie w pozycji: static, jeśli istnieje jakakolwiek transformacja.

Używając jquery jestem w stanie to wymyślić. nie przewija się gładko, ale robi sztuczkę. możesz przewijać w dół, a naprawiony div wyskakuje na górze.

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>

Na koniec chcemy ustalić, czy ipod touch w trybie poziomym czy pionowym będzie wyświetlany odpowiednio

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

Prosty sposób na rozwiązanie tego problemu polega na typowaniu właściwości transform dla Twojego elementu. i zostanie naprawiony. Happy Coding: -)

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

Również można spróbować jego sposób, jak również to jest również działa dobrze.

.classname{
      position: -webkit-sticky;
    }

Mimo, że atrybut CSS {position:fixed;} wydaje się (głównie) działać na nowszych urządzeniach z systemem iOS, możliwe jest, aby quirk urządzenia i fallback do {position:relative;} okazjonalnie i bez przyczyny. Zazwyczaj wyczyszczenie pamięci podręcznej pomoże, dopóki coś się nie wydarzy, a dziwactwo stanie się ponownie.

W szczególności od samego Apple przygotowywanie treści internetowych dla iPada :

Safari na iPadzie i Safari na iPhonie nie mają okien z możliwością zmiany rozmiaru. W Safari na iPhone i iPad, the rozmiar okna jest ustawiony na rozmiar ekranu (bez kontrolek interfejsu użytkownika Safari) i nie można go zmienić przez użytkownika. Aby poruszać się po stronie internetowej, użytkownik zmienia poziom powiększenia i położenie viewportu podczas dwukrotnego stuknięcia lub uszczypnięcia, aby powiększyć lub Na zewnątrz lub dotykając i przeciągając, aby przesunąć stronę. Jak zmienia się użytkownik poziom powiększenia i położenie punktu widzenia, które robią to w obrębie wyświetlany obszar zawartości o ustalonym rozmiarze (czyli okno). Oznacza to że elementy strony internetowej, które mają swoją pozycję "przymocowaną" do punktu widokowego może skończyć się poza wyświetlanym obszarem zawartości, poza ekranem.

Co jest ironią, Urządzenia z Androidem nie wydają się mieć tego problemu. Jest również całkowicie możliwe użycie {position:absolute;} w odniesieniu do tagu body i nie ma żadnych problemów.

Znalazłem główną przyczynę tego dziwactwa; że jest to zdarzenie przewijania, które nie gra ładnie, gdy jest używane w połączeniu z tagiem HTML lub BODY. Czasami nie lubi strzelać wydarzenie, lub trzeba będzie poczekaj, aż Zdarzenie scroll swing zostanie zakończone, aby otrzymać Zdarzenie. W szczególności, Punkt widokowy jest ponownie rysowany na końcu tego zdarzenia, a elementy stałe mogą być ponownie umieszczone w innym miejscu w punkcie widokowym.

Więc to jest to, co robię: (Unikaj korzystania z viewportu, i trzymaj się 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>

W istocie spowoduje to, że ciało będzie wielkości widoku i nie będzie przewijalne. Scrollable DIV zagnieżdżone wewnątrz będzie przewijać się tak, jak ciało normalnie (minus huśtawka efekt, więc przewijanie zatrzymuje się na touchend.) Stały DIV pozostaje stały bez zakłóceń.

Na marginesie, wysoka wartość z-index na stałym DIV jest ważna, aby PRZEWIJALNY DIV wydawał się być za nim. Zwykle dodaję zdarzenia zmiany rozmiaru i przewijania w oknie również dla zgodności z przeglądarką i alternatywną rozdzielczością ekranu.

Jeśli Wszystko inne zawiedzie, powyższy kod będzie działał zarówno ze stałymi, jak i przewijalnymi Div ustawionymi na {position:absolute;}.

Może to nie mieć zastosowania do wszystkich scenariuszy, ale odkryłem, że position: sticky (to samo z position: fixed) działa tylko na starych iPhone ' ach, gdy pojemnik przewijania jest , a nie ciałem, ale wewnątrz czegoś innego.

Przykładowy pseudo html:

body                         <- scrollbar
   relative div
       sticky div

Sticky div będzie lepki w przeglądarkach desktopowych, ale na niektórych urządzeniach, testowane z: Chromium: dev tools: device emultation: iPhone 6/7/8, a z Androidem 4 Firefox, nie będzie.

Co jednak zadziała, is

body
    div overflow=auto       <- scrollbar
        relative div
            sticky div

W moim przypadku było tak dlatego, że stały element był pokazywany za pomocą animacji. Jak podano w tym linku :

W Safari 9.1 posiadanie pozycji: fixed-element wewnątrz animowanego elementu może spowodować, że pozycja:fixed-element nie pojawi się.

Miał ten sam problem na Iphone X. Aby go naprawić, dodaję wysokość do kontenera

top: 0;
height: 200px;
position: fixed;

Właśnie dodałem top: 0 ponieważ mój div musi pozostać na górze

Oto moje rozwiązanie...

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>

Wyjaśnienie jest takie, że pozycja stała dla div będzie utrzymywać div na tle przez cały czas, a następnie rozciągamy div, aby przejść na wszystkie rogi przeglądarki (pod warunkiem,że margines ciała = 0) używając (lewy,prawy,górny, dolny) jednocześnie.

Upewnij się, że nie używasz szerokości i wysokości, ponieważ spowoduje to zastąpienie opcji górny,lewy,prawy, dolny.