Lista de diferencias conocidas de "Safari en iPad" sobre "Desktop Safari"

rendering variations

Question

Recientemente, al probar una aplicación web en navegadores de escritorio de Windows / Mac, y luego en un iPad, noté varias diferencias en Safari que no esperaba. a pesar de que la versión # es la misma.

Me gustaría compilar una lista de esas diferencias (para mí y para otros) para tener como referencia de desarrollador.

por ejemplo, en Safari en el iPad

• iPad Safari toma el control total del estilo de la lista / opción seleccionada
• iPad abre el teclado en pantalla cuando un elemento de entrada recibe el foco, por lo tanto, los widgets de calendario flotante en línea (y similares) pueden no funcionar como se esperaba (o deben modificarse)
• iPad Safari no es compatible con la position:fixed como el escritorio Safari <iOS 5
• iPad Safari (similar a iPhone / iPodTouch Safari) hipervínculos automáticamente números de 10 dígitos para ofrecer opciones de teléfono / contacto
• prompt(''long message...'',''default''); iPad Safari prompt(''long message...'',''default''); muestra solo 1 línea del mensaje (aunque sí proporciona desplazamiento del mensaje)

Escuché de otros que el JavaScript no funciona, etc., pero todavía no lo he probado por completo, por lo que agradeceré cualquier descubrimiento que pueda haber tenido.

Answer 1

Parece que hay un error en iPad Safari donde un elemento CSS con una imagen de fondo y un color de fondo se representa con un ligero borde en el color del color de fondo. Debería llenarse con la imagen de fondo hasta el borde del elemento renderizado.

Acabo de tener el mismo error en mi sitio, cuando trato de verlo en un Ipad. La estructura HTML es como:

<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>

La capa izquierda usa una imagen de fondo, mientras que la capa principal usa solo un color de fondo. La vista de Ipad muestra un ligero borde en el borde de la capa izquierda y derecha.

Cuando agrego

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

a la capa izquierda y derecha, el borde desaparece.

Answer 2

Actualmente estoy trabajando en una pequeña aplicación web receptiva que hace un uso intensivo de iframe youtube api. Aparentemente, la versión ipad de safari no es compatible con algunos métodos html5 que utilizo mucho en este proyecto.

Uno de ellos es window.postMessage, que es una forma de interactuar con scripts en otras páginas, por ejemplo, el script que se usa "dentro" de ese iframe. La reproducción automática de videos tampoco funciona.

Answer 3

Ahora puede controlar el estilo de las listas de selección en iOS reiniciándolo con -webkit-appearance: none;

Answer 4

Al lado no es compatible con la barra de desplazamiento en TextAea, parece que podemos usar javascript para hacer texto en TextArea también seleccionado automáticamente. Este código solo moverá el cursor al final del texto en 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>

Answer 5

Algunos más para ti:

1. No flash
2. Soporte Lousy iFrame (así que Facebook como etc. necesita una implementación personalizada para iPad)
3. Extrañas limitaciones de almacenamiento en caché
4. HTML textAreas no tiene una barra de desplazamiento (tienes que deslizar dos dedos, lo que por supuesto es increíblemente intuitivo)

En general. Trátelo como un iPhone escalado, no como un escritorio reducido.

Answer 6

El desplazamiento de jQuery () no funciona: http://bugs.jquery.com/ticket/6446

Answer 7

El navegador iPad no es compatible con la carga de archivos (incluso si es compatible con él, será inútil ya que el iPad no tiene un buscador de archivos estándar). El campo del archivo aparece con un botón Elegir archivo atenuado.

Answer 8

Esta regla soluciona el parpadeo de la animación en Safari en dispositivos iOS:

body {-webkit-transform:translate3d(0,0,0);}

Answer 9

PNGS transparentes de 24 bits ARRIBA DE UN TAMAÑO DE ARCHIVO CIERTO no se renderizan en el iPad2.
Sin embargo, puedo obtener 8 bit de las mismas dimensiones para renderizar.
No he descubierto cuál es el tamaño máximo de archivo para que se muestren.

Answer 10

Parece que hay un error en iPad Safari donde un elemento CSS con una imagen de fondo y un color de fondo se representa con un ligero borde en el color del color de fondo. Debería llenarse con la imagen de fondo hasta el borde del elemento renderizado.

Answer 11

Pensé que esto podría ser útil: la guía de Apple para preparar contenido web para el iPad

Apenas me ha sorprendido la posición: solucioné mi problema

Answer 12

Problemas de marco iPad Safari ocultará las barras de desplazamiento y expandirá los fotogramas al tamaño de su contenido. Cambiar la etiqueta de marco para incluir scrolling="yes" y noresize="noresize" parece no hacer nada. Algunos sitios se ven bien en todo, incluso en un navegador Dreamcast, pero no en el iPad. El problema se puede solucionar utilizando tablas e iframes en lugar de marcos normales (cols y filas, etc.).

Answer 13

Safari en iPad tiene el mismo problema con el ancho / relleno del botón que en el iPhone

iPhone <botón> relleno incambiable? describe este problema y una solución para eliminar el relleno de un botón con texto, pero esto no lo ayuda si desea que un botón sea más estrecho que el propio relleno (por ejemplo, para un botón que solo tiene un pequeño ícono). Para hacer eso, tuve que rodear el botón con un elemento externo con un ancho y desbordamiento definidos: oculto así:

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

(el borde azul es para mostrar dónde está el botón, no es crítico para el truco)

Answer 14

También descubrí que contenteditable no es compatible con el safari móvil, por lo tanto, usar un área de textarea simple es una mejor opción. Documentos del desarrollador de Apple

Answer 15

También parece que iPad Safari tiene problemas con elementos con overflow:auto; que, por lo tanto, debe mostrar las barras de desplazamiento ( webmanwalking.org/library/experiments/… ).

Answer 16

iPad Safari parece tener problemas para manejar imágenes de fondo en casos excepcionales, mostrando líneas extrañas de contenido más bajo.

No hay mucho sobre esto en Google (todavía).

Answer 17

position: fixed; 

No funciona en iOS 4 pero funciona en iOS 5.