Vista incorrecta / altura de página en el browser de Facebook embedded en iOS 9.x

Al abrir la aplicación de demostración desde el layout del núcleo con el browser incorporado en la aplicación de Facebook en iOS 9.x (al less), el elemento del pie de página no está visible cuando el dispositivo está en modo vertical. Si gira el dispositivo al modo horizontal, el pie de página estará parcialmente visible. Sin embargo, el pie de página (con un button) debe estar completamente visible.

La primera image muestra cómo debería verse la aplicación de demostración, mientras que la segunda muestra cómo la aplicación de demostración falta el pie de página cuando se ve con la vista web incrustada de la aplicación de Facebook (las imágenes fueron tomadas de un browser de escritorio de Chrome que ilustra cómo se manifiesta el error) :

Cómo debe verse la demostración. Demo con pie de página faltante.

Después de probar una gran cantidad de hipótesis diferentes, llegamos a la conclusión de que el error fue causado por el browser que hizo que la página / vista más alta que el área visible.

Este error parece estar relacionado con los problemas de la vista de iOS9 Safari, ¿meta no escalar correctamente? y la página web no alcanza el 100% de altura en la aplicación de Twitter en iOS 8 .

La solución que se nos ocurrió fue una combinación de otras respuestas que encontramos en StackOverflow, mientras prestábamos mucha atención a los detalles. Recalcaré que la implementación de algunos de los cambios siguientes no solucionó el error; todos los cambios tuvieron que hacerse.

  • El CSS que define la altura del elemento div wrap ( #outer-wrap ) tuvo que ser cambiado de

     outer-wrap { position: absolute; width: 100%; height: 100%; overflow: hidden; } 

    a

     html, body, #outer-wrap { position: absolute; top: 0; left: 0; bottom: 0; right: 0; overflow: hidden; } 
  • La siguiente function se agregó a la biblioteca y se invoca a la initialization:

     function _fixViewportHeight() { var html = document.querySelector('html'); function _onResize(event) { html.style.height = window.innerHeight + 'px'; } window.addEventListener('resize', _.debounce(_onResize, 125, { leading: true, maxWait: 250, trailing: true })); _onResize(); } _fixViewportHeight(); 
  • La label meta de la viewport tenía que ser

     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi"> 

    Sin embargo, los valores de la escala tenían que ser 1.0 , no 1 ; que causó que la solución se rompiera en uno de nuestros processs de compilation donde aplicamos html-minifier , que reemplazó los valores decimales por los integers. El problema del html-minifier se solucionó al rodear la label meta de la viewport <!-- htmlmin:ignore --> con <!-- htmlmin:ignore --> comments.

Tuve el mismo problema, pero todo lo que tenía que hacer era usar window.innerHeight , en lugar de document.body.clientHeight .

Para aquellos que buscan alternativas a la respuesta de Martin, también puede actualizar su CSS cuando detecta el browser en la aplicación de Facebook .

Mi problema era esencialmente relacionado con CSS: los elementos inferiores estaban ocultos.

 function adaptCSSFbBrowser() { var ua = navigator.userAgent || navigator.vendor || window.opera; if (isFacebookApp(ua)) { // Facebook in-app browser detected $('.bottombar').css('height', '50vh'); // Update css } }; 

Y entonces :

 $(document).ready(function() { adaptCSSFbBrowser(); ...