iPad iOS7 Safari landscape height Bug-fix

Informatique
1 février 2016 par laurent
2 Commentaires sur cet article

Si vous avez déjà tenté de développer une interface web prenant la taille exacte de l’écran, vous avez certainement du croiser ce bug de Safari dans l’iPad sous iOS7.

Description du bug sur iPad

Le bug intervient dans Safari sous iOS7 et seulement en orientation « landscape » (paysage).

« Il est écrit dans les tablettes de Skeloss que seul un Gnome des Forêts du Nord unijambiste dansant à la pleine lune au milieu des douze statuettes enroulées dans du jambon ouvrira la porte de Zaral Bak et permettra l’accomplissement de la prophétie. »

Quand ces conditions sont réunies, un conteneur global qui aura une height à 100% dépassera la hauteur réelle de l’écran de 20px activant ainsi un scroll de 20px sur l’interface.

Voici une page pour faire le test : http://krpano.com/ios/bugs/ios7-ipad-landscape/

iOS7 iPad landscape test portrait   iOS7 iPad landscape test landscape

On voit bien qu’en orientation « landscape » le bord du bas dépasse de l’écran.

Bug fix

Le bug fix que nous utilisons se décompose en deux parties.

La première partie est le Js qui va détecter les conditions qui créent le bug (IOS7). Il va alors ajouter une classe sur le body pour qu’on puisse gérer le tout avec du CSS et va également calculer la hauteur réelle disponible et la fixer en dur :

Ensuite vient le CSS qui va refixer le body bien comme il faut :

Et voilà !

laurent laurent
UX designer fan de web, de Romain, de sport, de bacon et de licorne.
Commentaires
  • Sam
    04/02/2016 09:24
    à ce niveau là, c'est quasiment de la magie noire !

403 Forbidden
403 Forbidden
This message is in English because "en" is the first supported language
of those your browser is set up to report as prefered.
Supported languages are: en (English), fr (Français), de (Deutsch), nl (Nederlands), no (norsk).

Access to this site is blocked

Additional information:
Client address = 178.20.66.225
Client name =
Client user =
Client group =
URL = http%3A%2F%2Fp3.wpcache-blogger.com%2Fgetlinks.php?...
Target group =

If you think this is an error, send this page to support@ovea.com

You may need to use the browser's <Reload> button
or even <Keyboard Shift>+<Browser Reload>
to get rid of this page after an access rule change

UP