Le positionnement fixe inférieur JS/CSS diffère sur le web v mobile web

J'ai un modal dont j'ai besoin pour être positionné en bas de mon écran. Il fonctionne très bien sur le navigateur en utilisant CSSLe positionnement fixe inférieur JS/CSS diffère sur le web v mobile web

position: fixed; 
bottom: 0px; 
top: auto; // overwrite top:0

fonctionne parfaitement sur navigateur web, mais sur le web mobile, ce fixe le modal au fond du HTML au lieu de l'écran. Même sur le plus petit écran, le HTML est au moins deux fois plus long que l'écran. Malheureusement, le modal se ferme également avec un onClickOutside, il est donc impossible d'accéder au modal.

Ceci est particulièrement grave, car une partie du site est utilisée par une application enveloppée, qui nécessite davantage le modal que le navigateur de bureau.

Y at-il une autre propriété que j'ai besoin d'ajouter en CSS pour gérer le safari mobile et le chrome? Quelque chose que je peux faire dans JS sans ajouter un module? Merci

EDIT: Un peu plus d'informations qui peuvent aider

JSX Structure

<body> 
    <div> 
     // lots of nesting later 
      <CustomInput onClick={this.toggleModal} /> 
    </div> 
    <CustomModal /> 
</body>

Je ne peux pas contrôler ce que le Modal est rendu à partir d'un module, je ne peux pas le déplacer à côté CustomInput.

Les navigateurs que j'utilise sont de dernière génération Safari et Chrome sur un iPhone récemment mis à jour, il ne devrait donc pas y avoir de problème de comportement obsolète sur les navigateurs.

Voici une codepen simplifiée où il semble se produire: https://codepen.io/anon/pen/OjgWYL Check it out sur différents grossissements

Source

2017-08-09 Sergey Kolchinskiy

peut vous donner plus de détails vous dire la page et l'écran, est la page non la pleine hauteur etc de l'écran. Regardez comment sont vos éléments parents, vous devrez peut-être les positionner sur la position relative, etc. Certains navigateurs mobiles peuvent agir différemment si vous pouvez poster des captures d'écran etc, tout ce qui peut vous aider, plus de code aussi –

Simon - J'ai fait quelques modifications, y compris l'ajout d'un CodePen qui devrait montrer le problème où l'élément fixe semble être fixé au bas du HTML au lieu de l'écran si vous ouvrez avec un navigateur mobile. –

Votre exemple fonctionne correctement dans Chrome et Safari sur iOS. Très probablement, le problème [Pourquoi 'position: fixed' ne fonctionne-t-il pas dans un iframe utilisant un iPhone ou un appareil iOS?] (Https://stackoverflow.com/questions/27083740/why-does-positionfixed-not- work-when-view-dans-un-iframe-using-a-iphone-ou) est toujours valide pour la version actuelle. Cela ne fonctionne donc pas dans le code, car l'aperçu est affiché dans un 'iframe'. –

pourrait-il que vous utilisez une version obsolète ancienne/Android ou iOS? Le CSS position: fixed avait l'habitude d'être traité comme position: absolute par ces périphériques, expliquant le comportement que vous rencontrez. Pour vous assurer que ce n'est pas le cas, vous pouvez vérifier l'user-agent pour obtenir la version iOS ou Android et ajouter la classe 'old_Android' ou 'old_iOS'. C'est ainsi que j'ai résolu cela dans le passé.

Voici le code que je l'ai utilisé:

var useragent = navigator.userAgent; 
//check for old stock Android browser (so not Chrome) 
//to remove position fixed and background attachment fixed 
if((useragent.indexOf("Mozilla/5.0") > -1) && 
    (useragent.indexOf("Android") > -1) && 
    (useragent.indexOf("Chrome") == -1) 
) { 
    $('body').addClass('old_Android'); 
} 

//check for old iOS version 
//to remove position fixed 
var iOS_version = iOSversion(useragent); 
if(iOS_version[0]<5) $('body').addClass('old_iOS');

Voici quelques lectures sur cette (ancienne) Sujet: http://bradfrost.com/blog/mobile/fixed-position/

Source

2017-08-09 23:03:13 JoostS

Merci pour ça! J'ai vérifié ce fil avant d'ouvrir ce StackO Q, mais ce n'était pas beaucoup d'aide. Les deux navigateurs que je suis en train de tester (Safari et Chrome) sont mis à jour sur un iPhone récemment mis à jour, donc ce correctif n'a pas semblé aider. Appréciez-le bien! –

Le positionnement fixe inférieur JS/CSS diffère sur le web v mobile web

Répondre

Questions connexes