El bug de la altura en los iPad landscape con iOS 7

Hoy comparto un bug que me trajo de cabeza en uno de mis últimos proyectos, porque es un bug bug, de esos que no tienen ningún sentido y es imposible arreglar…pero que conociéndolo, podemos buscar soluciones fácilmente.

El bug consiste en que en iPads en landscape con iOS 7, si tenemos un elemento con altura 100% relativa a la ventana, resulta que mide 20px más que ella, ¿cómo te quedas? pues así es.

En mi caso concreto me volvía loca buscando por qué razón un texto que debía posicionarse a una determinada distancia del bottom, salía perfecta en todos los dispositivos, navegadores y SO, excepto en mi iPad mini en horizontal, que se descolocaba…

Podéis ver un ejemplo muy clarificador en la siguiente página, http://krpano.com/ios/bugs/ios7-ipad-landscape/ en ella, si lo véis desde un ipad con iOS 7 en horizontal, lo veréis así, el borde rojo que debería estar abajo, igual que el resto, no sale.

la-foto

Yo lo solucioné mezclando un par de cosas que encontré, básicamente se trata de detectar tanto el dispositivo, como el sistema operativo, por javascript a través del userAgent  y meterle una clase específica al html, al que después atacamos con una media query:

Os paso un enlace donde proponen obligar al html a medir lo que debería medir, mediante un position:fixed y el height, pero a mí esa solución no me servía por la naturaleza de mi proyecto y además no me acaba de convencer algo tan drástico, llamadme rara…

https://gist.github.com/benhuson/8664741

En mi caso, sencillamente puse más distancia al elemento que se me quedaba pegado al bottom y solucionado.

Bueno niños, espero que os sirva!

2 Responses to “El bug de la altura en los iPad landscape con iOS 7”

    • Diana Aceves

      Gracias Germán, tienes toda la razón, me cuesta mucho escribir, para eso soy un desastre…

      Responder

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">