position : la correction ne fonctionne pas sur l'iPad et l'iPhone

Question

Cela fait un moment que je me débats avec le positionnement fixe dans l'iPad. Je sais que iScroll et cela ne semble pas toujours fonctionner (même dans leur démo). Je sais aussi que Sencha a un correctif pour cela, mais je n'ai pas pu le faire. Ctrl + F le code source de ce correctif.

J'espère que quelqu'un aura la solution. Le problème est que les éléments à position fixe ne sont pas mis à jour lorsque l'utilisateur effectue un panoramique vers le bas ou vers le haut sur un Safari mobile fonctionnant sous iOS.

Answer 1

Un grand nombre de navigateurs mobiles ne prennent délibérément pas en charge position:fixed; au motif que les éléments fixes pourraient être gênants sur un petit écran.

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

Consultez également cette page pour obtenir un tableau de compatibilité indiquant les navigateurs mobiles pris en charge. position:fixed; : http://www.quirksmode.org/m/css.html

(mais notez que le monde des navigateurs mobiles évolue très rapidement, de sorte que des tableaux comme celui-ci risquent de ne pas rester à jour très longtemps !)

Mise à jour : iOS 5 et Android 4 sont tous deux signalés comme ayant un support de position:fixe maintenant.

J'ai testé moi-même iOS 5 dans un Apple Store aujourd'hui et je peux confirmer qu'il fonctionne avec la position fixée. Il y a cependant des problèmes avec le zoom avant et le panoramique autour d'un élément fixe.

J'ai trouvé ce tableau de compatibilité beaucoup plus à jour et utile que celui de quirksmode : http://caniuse.com/#search=fixed

Il contient des informations actualisées sur Android, Opera (mini et mobile) et iOS.

Answer 2

Le positionnement fixe ne fonctionne pas sur iOS comme sur les ordinateurs.

Imaginez que vous avez une feuille de papier (la page web) sous une loupe (la fenêtre de visualisation), si vous déplacez la loupe et votre œil, vous voyez une partie différente de la page. C'est ainsi que fonctionne iOS.

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

Au lieu de déplacer la loupe, vous pouvez aussi déplacer le papier (la page web), tout en gardant la feuille de plastique et la loupe immobiles. Dans ce cas, le mot sur la feuille de plastique semblera rester fixe, et le reste du contenu semblera se déplacer (parce qu'il l'est réellement). Il s'agit d'un navigateur de bureau traditionnel.

Ainsi, dans iOS, la fenêtre d'affichage se déplace, tandis que dans un navigateur traditionnel, la page web se déplace. Dans les deux cas, les éléments fixes restent immobiles en réalité, bien que sur iOS les éléments fixes semblent se déplacer.

---

La façon de contourner ce problème est de suivre les derniers paragraphes de l'article. cet article

(en fait, désactiver complètement le défilement, placer le contenu dans une division séparée pouvant défiler (voir la boîte bleue en haut de l'article lié), et positionner l'élément fixe de manière absolue).

---

"position:fixed" fonctionne désormais comme prévu dans iOS5.

Answer 3

Position : fixed fonctionne sur Android/iphone pour le défilement vertical. Mais vous devez vous assurer que vos balises méta sont bien définies, par exemple

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

De plus, si vous envisagez de faire fonctionner la même page sur Android avant la version 4.0, vous devez également définir la position supérieure, sinon une petite marge sera ajoutée pour une raison quelconque.

Answer 4

Maintenant apple supporte cela

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

Answer 5

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 cela vous aidera.