Les Divs Scrollables de mon site fonctionnent partout sauf Safari Mobile

Question

Je travaille sur un site web, http://strange.business qui est conçu pour charger 5 histoires aléatoires dans 5 divs de visualisation défilantes. Note: Il n'y a que 2 histoires en ce moment. Il ne semblait pas y avoir de problème avec cet aspect de la conception de la page, les divs feraient défiler sans problème dans Chrome, IE, Edge, etc. Mais je l'ai essayé hier sur mon iPad mini de ma gf et les divs sont verrouillé pour une raison quelconque. Les histoires se chargent, mais elles ne défilent pas.

La configuration de base pour les divs est donc:

#display1 { 
background-color: white; 
height: 350px; 
overflow: auto; 
} 

#display1Inner { 
width: 100%; 
height: 100%; 
overflow: visible; 

} 

<div name="display1" id="display1" title="Display1"> 
     <span id="display1JavaWarning">You may need to enable 
      Javascript</span>   
     <object type="text/html" id="display1Inner"></object> 
</div> 

Lorsque la page se charge, il exécute une fonction javascript qui sélectionne un fichier htm de prévisualisation au hasard, et renseigne ensuite l'objet display1Inner avec ces données. Je sais que mon codage peut souvent être plus serré, mais cela fonctionne généralement. Sauf sur mobile Safari apparemment.

J'ai essayé un tas de variations CSS après avoir étudié des problèmes similaires, mais rien ne semble faire l'affaire. Ce "débordement: visible" Le bit était l'une de mes dernières tentatives, mais il n'était pas présent quand j'ai d'abord remarqué le problème. Je ne connais personne avec un iPhone (assez curieusement), donc je ne suis pas sûr que les versions ultérieures de Safari continuent de poser problème, mais l'iPad sur lequel j'ai testé ce n'est pas si vieux. Je devrais être capable de faire ce travail. Des pensées?

PS. La page est encore un travail en cours, désolé si vous avez du mal à y naviguer. D'accord, j'ai donc converti la page pour utiliser les iframes dans les divs imbriquées, et maintenant cela fonctionne sur toutes les plates-formes. Donc, cela est résolu. Yay! Maintenant, cependant, je suis en train d'essayer de me débarrasser des doubles barres de défilement qui apparaissent lorsque la page est affichée dans les navigateurs de bureau. Comme je comprends cette solution de contournement, IOS Safari ignore totalement les paramètres de hauteur iframe et les affiche intégralement. D'où la nécessité pour le div iframe-wrapper de garder cela en échec. Et d'où la barre de défilement supplémentaire quand je le regarde dans une fenêtre de navigateur "normale". Si je désactive le défilement sur la div iframe-wrapper, alors il élimine la barre de défilement double, mais brise aussi le défilement dans Safari.

Vous pouvez voir l'incarnation la plus récente au http://strange.business/test.htm. Je suis ouvert aux suggestions.

ETA: Succès! Après avoir réglé les hauteurs d'iframe à 99% et en supprimant les bordures, elles ressemblent à peu près à ce qu'elles faisaient auparavant, sans barres de défilement supplémentaires. Et le défilement fonctionne maintenant sur les plateaux. Un problème de moins dans ma vie. Merci pour l'aide!

Answer 1

Avez-vous essayé le CSS suivant pour votre div:

-webkit-overflow-scrolling: touch; 
overflow-y: scroll; 

je suis tombé sur cette solution dans ce codepen: https://codepen.io/kristiegiles/pen/WveNaX?editors=110

Il est mis en place pour faire défiler un iframe, mais je l'ai essayé avec un html simple à la place de l'iframe et ça a marché sur mon iPhone.

Le html est fondamentalement un div enroulé autour de votre contenu:

<h1>scrolling on iOS</h1> 
<div class="content"> 
<div class="iframe-wrapper"> 
// Your content here 
</div> 
</div> 

Avec -webkit-overflow-scrolling: touch; et overflow-y: scroll; ajouté à la classe appliquée à la div:

html,body{ 
height:100%; 
} 
.content{ 
width:100%; 
height:100%; 
overflow:hidden; 
position:relative; 
} 
.iframe-wrapper{ 
    position: absolute; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    top: 0; 
    -webkit-overflow-scrolling: touch; 
    overflow-y: scroll; 
} 

espoir qui aide.