javascript - restaurantes - desbordamiento-y no funciona en safari dentro de un modal
tripadvisor madrid restaurantes (7)
Ok aquí está el html:
<div style="height: 200px; position: relative;" id="filterOptionsContainer">
<table id="filterOptionsTable" class="table table-striped table-hover">
</table>
</div>
Básicamente, estoy agregando filas dinámicamente a la tabla y me gustaría que el contenedor desplace el desbordamiento. Primero probé lo obvio:
#filterOptionsContainer {
overflow-y: auto;
}
y eso funciona bien en todas partes excepto en Safari en dispositivos móviles ios.
Desde entonces, he pasado horas probando cada combinación de estilos que puedo pensar y leer, pero no puedo obtener el desplazamiento de desbordamiento estándar. Lo más cerca que conseguí fue conseguir que se mostrara la barra de desplazamiento (aunque en realidad no estaba desplazándose).
Toda la ayuda es apreciada. Es difícil para mí creer que no es posible desplazar el contenido de un div en un modo en Safari ...
Edición: Todavía en este tema. Necesito resolverlo.
Código para usar dos divs anidados para mostrar solo la barra de desplazamiento vertical.
<!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>
Compruebe su versión de Safari Browser. Y coincide con los criterios que figuran a continuación:
- Disponible en Safari 3.0 y versiones posteriores.
- Disponible en iOS 1.0 y versiones posteriores.
Si estás en contra de las condiciones entonces ponte a las siguientes medidas:
Aplicar ClearFix
.clearfix:after {visibility: hidden;}
Motivo : la configuración del desbordamiento no elimina el flotador en el elemento
O
Establecer la posición del elemento relativo en el nivel de raíz / cuerpo de esta manera:
body { position:relative; overflow-x:hidden; }
Nota : Aplica solo una de ellas.
Gracias y saludos
Intente aplicar esta línea, oa través de un script Jquery
style="overflow-y: scroll; -webkit-overflow-scrolling: touch;"
oa través de un guión de Jquery
$("#filterOptionsContainer").css({
"overflow-y": "scroll",
"-webkit-overflow-scrolling": "touch"
});
No tengo ningún producto IOS para verificar esto, pero parece un overflow: auto es un error conocido de Safari.
Prueba esto:
#filterOptionsContainer {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
Puedes configurar overflow-y:hidden; después del desbordamiento automático, y en el safari se aplicará al menos esa regla. Ref.
Puedes probar esto, funciona bien para mi
#filterOptionsContainer {
overflow: auto;
overflow-y: auto;
overflow-x: hidden;
}
Resolví esto cambiando a una selección múltiple (y ocultando la división desplazable) en dispositivos móviles (por lo que no hay una solución real). Gracias a todos por la ayuda.
Edit: finalmente he descubierto esto. Básicamente, lo que sucedió fue que después de cambiar a usar un multiselección, también estaba actuando de manera extraña en los dispositivos IOS cuando usaba Safari.
Al examinar más a fondo, un colega mío notó eventos de toque de dojo tanto en la división desplazable como en la selección múltiple (la plantilla que estoy usando usa el dojo). Comencé a buscar en la fuente de la plantilla para averiguar por qué estos eventos se estaban adjuntando a todos estos elementos y noté un módulo de dojo llamado "dojo / touch". Después de eliminar este módulo del proyecto, los elementos funcionan bien en Safari.
Lo que quita es que ''dojo / touch'' y IOS Safari son totalmente incompatibles.