[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é…

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