position: fixe ne fonctionne pas sur iPad et iPhone

un grand nombre de navigateurs mobiles délibérément ne supporte pas position:fixed; au motif que les éléments fixes pourraient se mettre en travers sur un petit écran.

le Quirksmode.org le site a un très bon billet de blog qui explique le problème: http://www.quirksmode.org/blog/archives/2010/12/the_fifth_posit.html

Voir Aussi cette page pour un tableau de compatibilité montrant quels navigateurs mobiles prennent en charge position:fixed; : http://www.quirksmode.org/m/css.html

(mais notez que le monde du navigateur mobile se déplace très rapidement, donc les tables comme celle-ci ne peuvent pas rester à jour longtemps!)

mise à jour: iOS 5 et Android 4 sont tous les deux signalés pour avoir la position:prise en charge fixe maintenant.

j'ai testé iOS 5 moi-même dans un Apple store aujourd'hui et je peux confirmer qu'il fonctionne avec position fixe. Il y a des problèmes avec le zoom dans et le ratissage autour d'un fixe élément bien.

j'ai trouvé cette table de compatibilité beaucoup plus à jour et utile que le quirksmode un: http://caniuse.com/#search=fixed

il a des informations à jour sur Android, Opera (mini et mobile) & iOS.

positionnement fixe ne fonctionne pas sur iOS comme il le fait sur les ordinateurs.

Imaginez que vous avez une feuille de papier (la page web) sous une loupe(la fenêtre), si vous déplacez la loupe et votre oeil, vous voyez une autre partie de la page. C'est de cette façon iOS fonctionne.

maintenant il y a une feuille de plastique transparent avec un mot dessus, cette feuille de plastique reste stationnaire quoi qu'il arrive (la position:éléments fixes). Donc quand vous déplacez le loupe l'élément fixe apparaît pour se déplacer.

alternativement, au lieu de déplacer la loupe, vous déplacez le papier (la page Web), en gardant la feuille de plastique et la loupe immobile. Dans ce cas, le mot sur la feuille de plastique semblent rester fixe, et le reste du contenu sera de se déplacer (parce qu'elle l'est) il s'agit d'un navigateur de bureau.

ainsi dans iOS le viewport se déplace, dans un navigateur traditionnel la page Web se déplace. Dans les deux cas, les éléments fixes restent dans la réalité; bien que sur iOS les éléments fixes semblent se déplacer.

la façon de contourner cela, est de suivre les derniers paragraphes dans cet article

(essentiellement désactiver le défilement tout à fait, avoir le contenu dans une div scrollable séparée (voir la boîte bleue en haut de l'article lié), et l'élément fixe positionné absolument)

"position: fixe" fonctionne maintenant comme vous l'attendez dans iOS5.

position: fixe ne fonctionne sur android/iphone pour le défilement vertical. Mais vous devez vous assurer que vos meta tags sont bien définis. 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">

aussi si vous prévoyez d'avoir la même page de travail sur android pre 4.0, vous devez définir la position supérieure également, ou une petite marge sera ajoutée pour une raison quelconque.

maintenant apple support que

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

pied de page fixe (ici avec 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}

J'espère que ça aidera.

éviter sur la même boîte en utilisant transform: - - - et position:fixe. L'élément reste en position:statique s'il y a transformation.

j'ai eu ce problème sur Safari (iOS 10.3.3) - le navigateur n'a pas été redessiné jusqu'à ce que l'événement de touchend a tiré. Les éléments fixes n'apparaissaient pas ou étaient coupés.

le truc pour moi était d'ajouter transform: translate3d(0,0); à mon élément de position fixe.

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

EDIT - je sais maintenant pourquoi la transformation corrige le problème: matériel-accélération. L'ajout de la transformation 3D déclenche l'accélération GPU transition en douceur. Pour plus d'informations sur hardware-acceleration checkout cet article: http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css .

en utilisant jquery je suis capable de trouver ceci. ça ne défile pas, mais ça fait l'affaire. vous pouvez faire défiler vers le bas, et la div fixe apparaît sur le dessus.

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

THE HTML

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

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

enfin nous voulons déterminer si l'iPod touch en mode paysage ou portrait pour afficher en conséquence

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

bien que l'attribut CSS {position:fixed;} semble (pour la plupart) fonctionner sur des dispositifs iOS plus récents, il est possible d'avoir le dispositif bizarre et repli à {position:relative;} à l'occasion et sans cause ou raison. Habituellement, vider le cache aidera, jusqu'à ce que quelque chose arrive et que la bizarrerie se reproduise.

spécifiquement, D'Apple lui-même préparation de votre contenu Web pour iPad :

Safari sur iPad et Safari sur iPhone n'ont pas de fenêtres redimensionnables. Dans Safari sur iPhone et iPad, La Taille de la fenêtre est réglée à la taille de la écran (moins les commandes D'interface utilisateur Safari), et ne peut pas être modifié par l'utilisateur. Pour déplacer une page web, l'utilisateur modifie le niveau de zoom et la position du point de vue comme ils Double tapent ou pincent pour zoomer ou , ou en touchant et en faisant glisser pour déplacer la page. Comme un utilisateur change le niveau de zoom et la position du viewport ils le font dans un zone de contenu affichable de taille fixe (c'est la fenêtre). Cela signifie que les éléments de la page Web qui ont leur position "fixe" au viewport peut se retrouver hors de la zone de contenu visible, hors de l'écran.

ce qui est ironique, appareils Android ne semblent pas avoir ce problème. En outre, il est tout à fait possible d'utiliser {position:absolute;} en référence à l'étiquette de corps et n'ont pas de problèmes.

j'ai trouvé la cause de ce caprice; c'est l'événement scroll pas jouer nice lorsqu'il est utilisé en conjonction avec le HTML ou la balise de corps. Parfois, il n'aime pas déclencher l'événement, ou vous aurez à attendre jusqu'à ce que le défilement swing événement est terminé pour recevoir l'événement. En particulier, le viewport est redessiné à la fin de cet événement et les éléments fixes peuvent être repositionnés ailleurs dans le viewport.

donc c'est ce que je fais: ( éviter d'utiliser le viewport, et s'en tenir au 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>

dans l'essence cela causera le corps à la taille du viewport et non-scrollable. Le scrollable DIV niché à l'intérieur va défiler comme le corps normalement (moins l'effet swing, de sorte que le défilement s'arrête sur touchend.) Le DIV fixe reste fixe Sans interférence.

comme note secondaire, une valeur élevée z-index sur le DIV fixe est importante pour garder le DIV scrollable semble être derrière elle. J'ajoute normalement dans la fenêtre redimensionner et faire défiler des événements aussi pour compatibilité entre navigateur et résolution d'écran alternative.

si tout le reste échoue, le code ci-dessus fonctionnera aussi avec les DIVs fixes et les DIVs programmables définis à {position:absolute;} .

dans mon cas, le défilement montrait l'élément position: fixed qui ne s'affichait pas à l'origine lorsqu'il était ajouté au DOM. Donc j'ai déclenché manuellement l'événement scroll qui à son tour a déclenché une reprise et voilà.

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

s'il vous Plaît essayer ce, source de ici

    .your_class {
        transform: translate3d(0,0,0);
        .....
        .....
    }

voici ma solution...

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>

explication est que la position fixée pour le div gardera le div sur le fond à tout moment, puis nous étirons le div pour aller sur tous les coins du navigateur (à condition que la marge du corps = 0) en utilisant le (Gauche,Droite,Haut,Bas) simultanément.

s'il vous plaît assurez-vous vous n'utilisez pas la largeur et la hauteur car cela outrepassera les options Haut,Gauche,Droite,Bas.