1480 sujets

Web Mobile et responsive web design

Bonjour à toutes et tous,
Il existe un problème que j'ignorais jusqu'alors, lorsque l'on affiche un iframe sur iOs : le scroll ne fonctionne pas (sur les dernières versions sans les 2 doigts).

Un solution a été proposée (par Apple ?) : elle consiste à inclure l'iframe dans un #wrapper, et lui appliquer le css :


#wrapper {
	-webkit-overflow-scrolling: touch;
	overflow-y: scroll;
	height: 100%;
	min-height: 100%;
}


Le soucis est que si dans l'iframe, je possède des interactions de type
on('click')
, ces événements ne seront pas bindés. Ce qui est gênant. Du coup une solution s'est proposée à moi : utiliser
on('touchstart')
à la place.

Oui mais voilà, ce n'est pas magique et de nombreux désagréments découlent de cette utilisation. Dans mon cas, la page qu'on inclut via l'iframe est un formulaire en 3 étapes.
Premier désagrément : le "touch" sur un bouton suivant ramène directement en haut de la page, alors qu'un joli
animate()
faisait le travail auparavant.
Deuxième désagrément, ce comportement apparaît aussi lorsque "touch" d'autres éléments, comme le google captcha, ou bien le datepicker. Et c'est extrêmement pénible pour l'utilisateur.

Donc d'un côté je suis forcé d'utiliser
-webkit-overflow-scrolling: touch;
pour iOs, mais de l'autre ça me pète mes touch events. Il en découle que l'application n'est absolument pas accessible Smiley fache .

Malgré le fait que ce problème de scroll sur ipad et iphone ait déjà été reporté, il ne semble pas qu'une solution viable et accessible au problème soit prévue. Je souhaitais donc connaître les solutions que certains d'entre vous on pu expérimenter pour le résoudre, ou à tout le moins, l'atténuer.

Merci