1485 sujets

Web Mobile et responsive web design

[Résolu] Overflow hidden remonte en haut de page sur iOS

Bonjour.

J’ai un problème avec une popin sur iPad.

Besoin : afficher une popin avec voile en restant où je suis dans mon scroll avant l’affichage de la popin et avec impossibilité de scroller la page quand la popin est affichée.

Réussite : marche parfaitement sur desktop quelque soit l’OS et le navigateur.

Échec : sur iPad, impossible d’avoir à la fois le scroll de page inactivé et la position de page qui reste là où elle est.

Le fonctionnement pour bloquer la page en desktop est de mettre un overflow hidden sur le body. Cela ne fonctionne pas sur iPad, la page reste scrollable (bug assez connu). J’ai essayé 2 solutions de contournement :

body.no-scroll.touch {
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
}

=> comme prévu, cela bloque la page, mais remonte en haut de page.


html {
     overflow: hidden
}

=> le double overflow: hidden bloque bien le scroll sur la page, mais contrairement à ce que je m’attendais, la page remonte aussi tout en haut.

Quelqu'un a une idée ? Je suis coincé…
Modérateur
hello,

Je dirais qu'il faut simplement un overflow: hidden sur ton body et passer la position fixed sur le container de ta popin. Ensuite, tu peux utiliser un before pour faire le backdrop qui sera également positionné mais avec un z-index: -1...
Hum. Ma structure n’est pas tout à fait la même : le voile est dans le DOM et affiché avec la popin via JS. Mais j’ai déjà bien l’overflow: hidden sur le body et le voile en fixed… ce qui n’empêche pas le scroll sur iPad…

Voici un codepen :
https://codepen.io/Ogham/pen/LddemE
Bonjour Derwoed,

Une idée comme ca ...
Si en js tu écoutais le scroll et que tu le repositionne à 0 quand il change
Je pars du principe que le JS n’est pas là pour compenser les bugs de navigateur. Tout ajout au framework JS doit être justifié par une demande de la MOA non réalisable par CSS. Donc là, le problème ne sera pas résolu par JS vu que le CSS fait ça très bien partout ailleurs que sur iPad.

Donc, pas de solution CSS bison-futé qui m’aurait échappée pour bloquer le scroll tout en conservant la position sur iPad ?
Bonjour Derwoed,

Dernière tentative Smiley biggrin , sur stackoverflow, il double fixed
html, body{
     position: fixed;
}

Bon mon anglais n'est pas très bon, mais cela ressemble vaguement à ta demande
J'ai pas iPad, donc je ne peux pas tester avant de poster ce post pour vérifier.

Si un jour tu trouves la solution, n'hésites pas à la partager cela m'intéresse
Oui, le double overflow, je l’ai testé aussi, comme je l’ai mentionné dans mon premier message (mais je reconnais ne pas avoir été explicite vu que le code fourni ne le mentionne pas).
Mais comme je l’ai dit, il a le même problème (remonte en haut de page). Tant pis, on peut considérer que c’est un "bug" acceptable sur iPad et laisser comme ça…
Sujet clos
Aller à