iPhone : problème de positionnement absolu

Voilà que je me bute à un problème : réussir à attacher à la fenêtre de Safari un menu de navigation rappelant une application iPhone.

Rien de plus facile avec la propriété CSS position:fixed; n’est-ce pas?

Eh bien non justement. Et pourquoi donc?

Parce qu’Apple, dans sa version mobile de Safari uniquement, a décidé de ne pas supporter cette propriété question d’empêcher quiconque (moi en particulier) de faire un site mobile qui ressemblerait trop à une Application.

Autre solution : créer deux zones (#content et #footer) qui se partagent la fenêtre du iPhone (320×240). On positionne le #footer collé au bas, le #content prend le reste de la hauteur et on lui ajoute un overflow:auto; pour permettre la navigation dans le conteneur principal. Rien de plus simple encore une fois, mais est-ce que ça fonctionne?

NON PLUS!

Encore une fois, notre ami Safari Mobile empêche la navigation à l’intérieur d’un DIV avec overflow:auto; autrement qu’en utilisant ses 2 doigts pour faire le défilement. Pratique et intuitif non? D’ailleurs je gage vous ne le saviez même pas…

Mon prochain test sera de passer par un IFRAME, mais vous vous doutez certainement que je n’en ai pas du tout envie de m’aventurer là-dedans…

–

Comme solution alternative existe cependant ce script très intéressant que j’ai déniché et qui émule les actions de navigation en javascript. Toutefois ce dernier donne une expérience utilisateur plutôt désagréable et très saccadée.

–

Il y a toutefois un peu de lumière au bout du tunnel avec jQTouch, une librairie HTML5 reprenant toutes les animations et interfaces propre au iPhone dans une version compatible avec le webkit mobile.

Reste à voir si ça marchera correctement.

Mais dans l’intervalle Apple, je suis extrêmement déçu.