web-dev-qa-db-fra.com

Liste des différences connues de "Safari sur iPad" par rapport à "Safari de bureau"

En testant récemment une application Web sur des navigateurs de bureau Windows/Mac, puis sur un iPad, j'ai remarqué diverses différences dans Safari auxquelles je ne m'attendais pas. même si la version # est la même.

Je voudrais composer une liste de ces différences (pour moi et pour les autres) à avoir comme référence pour les développeurs.

par exemple dans Safari sur l'iPad

  • iPad Safari prend le contrôle total de la sélection de la liste/du style des options
  • l'iPad ouvre le clavier à l'écran lorsqu'un élément d'entrée reçoit le focus, donc les widgets de calendrier flottants en ligne (et similaires) peuvent ne pas fonctionner comme prévu (ou doivent être modifiés)
  • iPad Safari ne prend pas en charge position:fixed comme Safari de bureau <iOS 5
  • l'iPad Safari (similaire à l'iPhone/iPodTouch Safari) relie automatiquement les numéros à 10 chiffres pour offrir des options de numéro de téléphone/contact
  • iPad Safari Prompt('long message...','default'); n'affiche qu'une seule ligne du message (bien qu'il fournisse le défilement du message

J'ai entendu dire par d'autres que certains JavaScript ne fonctionne pas, etc., etc., mais je ne l'ai pas encore entièrement testé, je serais donc reconnaissant pour toutes les découvertes que vous pourriez avoir rencontrées.

ipadsafarirenderingvariations
56
scunliffe

Un peu plus pour vous:

  1. Pas de flash
  2. Support Lousy iFrame (donc Facebook comme etc. a besoin d'une implémentation personnalisée pour iPad)
  3. Limitations de mise en cache étranges
  4. HTML textAreas n'obtient pas de barre de défilement (vous devez glisser avec deux doigts - ce qui, bien sûr, est incroyablement intuitif)

En général. Traitez-le comme un iPhone agrandi, pas un ordinateur de bureau réduit.

12
Michael Mullany

Safari sur iPad a le même problème avec la largeur/le rembourrage des boutons que sur l'iPhone

l'iPhone <button> padding immuable? décrit ce problème et une solution pour supprimer le padding sur un bouton avec du texte, mais cela ne vous aide pas si vous voulez qu'un bouton soit plus étroit que le padding lui-même (par exemple pour un bouton qui ne comporte qu'une petite icône). Pour ce faire, j'ai dû entourer le bouton d'un élément extérieur avec une largeur et un débordement définis: cachés comme ceci:

<span style="border: solid 1px blue; display: block; width: 16px; overflow: hidden">
    <button style="-webkit-appearance: none; border-width: 0">&nbsp;</button>
</span>

(la bordure bleue est pour montrer où est le bouton, ce n'est pas critique pour le hack)

4
divestoclimb

le décalage () de jQuery ne fonctionne pas: http://bugs.jquery.com/ticket/6446

4
alalonde

J'ai pensé que cela pourrait être utile: le guide d'Apple pour préparer du contenu Web pour l'iPad

Je viens d'être rattrapé par la position: problème fixe moi-même

4
Ranguard

Il semble également que l'iPad Safari rencontre des problèmes avec des éléments avec overflow:auto; qui devrait donc afficher des barres de défilement ( page de test avec div et iframe ).

3
scunliffe

le navigateur iPad ne prend pas en charge le téléchargement de fichiers (même s'il le prend en charge, il sera inutile car l'iPad n'a pas de navigateur de fichiers standard). Le champ de fichier apparaît avec un bouton Choisir un fichier grisé.

3
rubyprince

l'iPad Safari semble avoir du mal à gérer les images d'arrière-plan dans de rares cas, montrant des lignes étranges de contenu de plus basse altitude.

Il n'y a pas grand-chose à ce sujet dans Google (pour l'instant).

3
Damien

Vous pouvez désormais contrôler le style des listes sélectionnées sur iOS en le réinitialisant avec -webkit-appearance: none;

2
kspearrin
Il semble y avoir un bug dans iPad Safari où un élément CSS avec à la fois une image d'arrière-plan et une couleur d'arrière-plan est rendu avec une légère bordure dans la couleur de la couleur d'arrière-plan. Il doit se remplir de l'image d'arrière-plan jusqu'au bord de l'élément rendu.

Je viens d'avoir le même bug sur mon site, en essayant de le visualiser sur un Ipad. La structure HTML est comme:

<div class="main"> <!-- background-color: white -->
   <div class="left"></div> <!-- background-image: url(some_transparent_png) -->
   <div class="content">...</div>
   <div class="right"></div> <!-- background-image: url(some_transparent_png) -->
</div>

Le calque gauche utilise une image d'arrière-plan, tandis que le calque principal utilise uniquement une couleur d'arrière-plan. La vue Ipad montre une légère bordure au bord du calque gauche et droit.

Quand j'ajoute

 -webkit-background-size: 100% 100%;

aux calques gauche et droit, la bordure disparaît.

2
user1145306

À côté de ne prend pas en charge la barre de défilement dans TextAea, il semble que nous pouvons également utiliser javascript pour sélectionner automatiquement le texte dans TextArea. Ce code ne déplacera le curseur qu'à la fin du texte dans TextArea.

<div>
  <textarea id="text-embed-code" autocapitalize="off" multiline="">
There is a fox running after chrome.
  </textarea>
  <button onclick="testSelectText(event);">select text</button>
</div>
<script>
  function testSelectText(e) {    
    var box = document.getElementById("text-embed-code");
    box.select();
    e.preventDefault();
    return false;
  }
</script>
2
leon

Je travaille actuellement sur une petite application Web réactive qui fait un usage intensif de l'API YouTube iframe. Apparemment, la version ipad de safari ne prend pas en charge quelques méthodes html5 que j'utilise beaucoup dans ce projet.

L'un d'eux est window.postMessage, qui est un moyen d'interagir avec des scripts sur d'autres pages, par exemple le script utilisé "dans" cet iframe. La lecture automatique des vidéos ne fonctionne pas non plus.

1
Julian

Les fichiers PNG transparents 24 bits AU-DESSUS D'UNE CERTAINE TAILLE DE FICHIER ne s'affichent pas sur l'iPad2.
Je peux cependant obtenir des rendus 8 bits de même dimension.
Je n'ai pas découvert quelle est cette taille de fichier maximale afin de les rendre à rendre.

1
PlanetPUSH

Cette règle corrige le scintillement des animations dans Safari sur les appareils iOS:

body {-webkit-transform:translate3d(0,0,0);}
1
Brian D'Astous

Il semble y avoir un bug dans iPad Safari où un élément CSS avec à la fois une image d'arrière-plan et une couleur d'arrière-plan est rendu avec une légère bordure dans la couleur de la couleur d'arrière-plan. Il doit se remplir de l'image d'arrière-plan jusqu'au bord de l'élément rendu.

1
jkg0

Problèmes de trame. iPad Safari masquera les barres de défilement et étendra les cadres à la taille de leur contenu. Modification de la balise frame pour inclure scrolling="yes" et noresize="noresize" semble ne rien faire. Certains sites semblent bien sur tout, même un navigateur Dreamcast, mais pas sur iPad. Le problème peut être résolu en utilisant des tableaux et des iframes au lieu d'un frameset normal (cols et lignes, etc.).

1
Andrew
position: fixed;

Ne fonctionne pas sur iOS 4 mais fonctionne sur iOS 5.

0
OZZIE

J'ai également découvert que contenteditable n'est pas pris en charge dans les safaris mobiles, donc utiliser un simple textarea est un meilleur pari. Apple Developer Docs

0
scunliffe