web-dev-qa-db-fra.com

débordement-y ne fonctionne pas en safari à l'intérieur d'un modal

Ok voici le html:

<div style="height: 200px; position: relative;"  id="filterOptionsContainer">
                <table id="filterOptionsTable" class="table table-striped table-hover">
                </table>
            </div>

Fondamentalement, j'ajoute dynamiquement des lignes à la table et je voudrais que le conteneur fasse défiler le débordement. J'ai d'abord essayé l'évidence:

#filterOptionsContainer {
overflow-y: auto;
}

et cela fonctionne bien partout sauf pour Safari sur les appareils mobiles ios.

Depuis lors, j'ai passé des heures à essayer toutes les combinaisons de styles auxquelles je peux penser et à lire, mais je ne peux pas obtenir le défilement de débordement standard. Le plus proche que j'ai obtenu était d'afficher la barre de défilement (elle ne défilait pas en fait cependant).

Toute aide est appréciée. Il m'est difficile de croire qu'il n'est pas possible de faire défiler le contenu d'un div dans un modal dans Safari ...

Edit: Toujours sur cette question. Je dois le résoudre.

javascripthtmlioscss
26
pQuestions123

J'ai résolu ce problème en passant à une multisélection (et en masquant le div à défilement) sur les appareils mobiles (donc pas de vraie solution). Merci pour toute l'aide à tous.

Edit: J'ai enfin compris cela. Fondamentalement, ce qui s'est passé, c'est qu'après que je suis passé à l'utilisation d'une multisélection, il agissait aussi étrangement dans les appareils IOS lors de l'utilisation de Safari.

En examinant plus en détail un de mes collègues, j'ai remarqué des événements tactiles dojo à la fois sur le div défilable et sur la multisélection (le modèle que j'utilise utilise dojo). J'ai commencé à chercher dans la source du modèle pour comprendre pourquoi ces événements étaient attachés à tous ces éléments et j'ai remarqué un module de dojo appelé "dojo/touch". Après avoir supprimé ce module du projet, les éléments fonctionnent correctement dans Safari.

Le point à retenir est que 'dojo/touch' et IOS Safari sont totalement incompatibles.

0
pQuestions123

Essayez d'appliquer ce en ligne, ou via un script Jquery

 style="overflow-y: scroll; -webkit-overflow-scrolling: touch;"

ou via un script Jquery

$("#filterOptionsContainer").css({
    "overflow-y": "scroll",
    "-webkit-overflow-scrolling": "touch"
});
12
Raja Mohammed

Je n'ai pas de produit IOS pour vérifier cela, mais il semble que overflow: auto est un bogue connu de Safari.

Essaye ça:

#filterOptionsContainer {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
5
Chris

Code pour utiliser deux div imbriqués pour afficher uniquement la barre de défilement verticale.

<!DOCTYPE html>
<html>
<body>
<div class="div1">     
    <div class="div2">     
111111<br>
222222222222222222222<br>
3333333333333333333333333333333333<br>
44444444<br>
55555555555555555555555555555<br>
6666666666666666666666666666<br>
77777777777<br>
88888888888888888888888888<br>
99999999999999999999999<br>
0000000000000000000000000000000<br>
aaaaaaaaaaaaaaaaaa<br>
bbbb<br>
cccccccccccccccc<br>
    </div>
</div>
</body>
</html>
<style>

.div1{
    overflow:auto;
    width:100px;
    height:100px;
}
.div2{
    overflow:hidden;
    width:100%;
}
</style>
1
Bug

Si aucune des solutions ne fonctionne, vous pouvez essayer flex: 1 1; Cela prend en charge plusieurs navigateurs.

1
Kristy Welsh

vous pouvez essayer ça, ça marche bien pour moi

#filterOptionsContainer {
    overflow: auto; 
    overflow-y: auto; 
    overflow-x: hidden; 
}
1
Binh LE

Vous pouvez définir overflow-y:hidden; après le débordement automatique, et en safari au moins cette règle sera appliquée. Réf.

1
Microsmsm

Vérifiez votre version du navigateur Safari. Et correspond aux critères ci-dessous:

  1. Disponible dans Safari 3.0 et versions ultérieures.
  2. Disponible dans iOS 1.0 et versions ultérieures.

si vous êtes contre les conditions, passez aux mesures suivantes:

  1. Appliquer ClearFix

    .clearfix:after {visibility: hidden;}

Raison: Le réglage du débordement n'efface pas le flotteur de l'élément

OU

  1. Définissez la position de l'élément relatif au niveau racine/corps comme ceci:

    body { position:relative; overflow-x:hidden; }

Remarque: Appliquez un seul d'entre eux.

Merci et bravo

1
Amulya Kashyap