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.
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
El javascript: if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i)) { $('html').addClass('ipad ios7'); } El CSS: @media (orientation:landscape) { html.ipad.ios7 { CSS de sustitución } } |
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!
Esta muy interesante este sitio, lo que le falta es contenido, pero me gusta mucho
Gracias Germán, tienes toda la razón, me cuesta mucho escribir, para eso soy un desastre…