IOs, Safari y su bug con la unidad relativa al viewport vh 8.7.14
Descripción y soluciones al bug de IOs con la unidad vh (unidad relativa a la altura del viewport)
IOs, Safari y su bug con la unidad relativa al viewport vh
Quizás el detalle más significativo de tema actual que uso en el blog sea el header al 100% de la ventana. Tanto en el índex como en el cada ítem o artículo. Principalmente en estos últimos, pues es prácticamente la única "floritura" en ellos.
Es un detalle sencillo de lograr con independencia de cuál sea el tamaño de la ventana o viewport del usuario y dinámico: se se reescala la ventana se ajusta a las nuevas dimensiones. Sencillo porque para eso fueron creadas las unidades relativas al viewport.
Me decidí a su uso en un elemento tan significativo porque su soporte podría decirse que es "universal" pese a algunas cosillas secundarias
- IE10 : soporte completo
- IE9 : soportado, pero en lugar de vmin usa vm
- Chrome 22+ : soporte completo
- Safari 6 / iOS Safari 6 : soporte completo
- Firefox 19+ : soporte completo
- Blackberry Browser 10 : soporte completo
Y pese a todo recibí algunos avisos de lectores del blog sobre anomalías en la visualización del blog en aparatos que tenían un denominador común: el dibujito de una manzana.
Que no. Que esto no es un ataque a la manzana xD. Tranquilo y sigue leyendo.
Más que fallo de los aparatos todo indica que es un bug en el manejo de las unidades relativas al viewport de IOs6+ y Safari que aún dándole soporte hacen cosas raras como añadir la altura de los contenidos al 100vh de elemento.
Vía Css no se puede hacer nada para corregirlo ya qué sí soportan estas unidades pero el cómputo del valor final lo hacen mal.
Todo pasa por el uso de javascript. Y ahí fuera hay unas cuantas solucciones propuestas:
- Hilo de discusión en github
- Crazy, buggy implementation por Vasilis van Gemert
- iOS7 - Mobile Safari And Viewport Units por @rodneyrehm
- Viewport Unit Bug iOS Safari por @mjaumjauweb
- Y todo Google por si no es suficiente.
No he probado ni implementado ninguna de ellas. Así que desconozco su efectividad y/o efectos sobre la página.
Y por esto último quizás te preguntes el porqué no arreglarlo si conozco la naturaleza del problema y posibles solucciones. Y la respuesta es sencilla: por la naturaleza y particularidades de este blog me cansé de que los picacódigos se hayan hecho responsables de los bugs de los desarroladores de los navegadores y hayan asumido la obligación de parchearlos. Y de que los usuarios reclamen a quien no crea el problema.
Quien usa un aparato debe ser consciente de sus cualidades y de sus bugs por igual. Y exigir corregir los segundos a su "fabricante" con la misma intensidad que alaba sus bondades.
Esto último con cariño.
Crédito de las imágenes de los bichos: Disney & Pizar y su película "Bichos".
){kind=link}
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso