Ionic-framework: La barra de estado de iOS 11 se superpone con el encabezado

También intenté usar WkWebView siguiendo estas instrucciones (https://github.com/ionic-team/cordova-plugin-ionic-webview#installation-instructions), pero esto no resolvió el problema.

También intenté usar Ionic Package e instalarlo en el dispositivo, pero tampoco funcionó.

¡Hola! ¡Gracias por abrir un problema con nosotros!

Intenté tus pasos para reproducir con la excepción de compilar localmente en mi Mac en lugar de usar IonicPro y funcionó bien. Entonces, esto podría ser un problema con Ionic Pro.

Solo para descartar diferencias entre lo que generé y lo que tiene, ¿sería posible que cargara su aplicación de muestra en GitHub para que yo pudiera echarle un vistazo?

Gracias por usar Ionic

Aquí está el código fuente: teststatusbar.zip (

Esto no debería importar, pero para ser exactos usé ionic start myApp sidemenu lugar de ionic start myApp tabs

Eso funcionará bien. Gracias. Te dejaré saber cómo van mis pruebas.

Tu código se ve bien. Tiene todo lo que debería, etc.

Construir localmente en mi Mac y ejecutarlo en un emulador SE se ve bien:

Esto puede ser un problema con Ionic Pro. Déjame comprobar eso.

Pude duplicar este problema mediante:

1. prueba de inicio iónico menú lateral menú lateral
2. enlace a la cuenta Ionic Pro cuando se le solicite
3. construir localmente en mi Mac e instalarlo en mi teléfono, todo funciona muy bien
4. presione a Ionic Pro, espere la compilación, vea en Ionic View, obtenga el problema de saturación de la barra de estado

Asignado al mantenedor de View para que lo revise.

Me estoy encontrando con lo mismo, creo que estas líneas son las culpables. https://github.com/ionic-team/ionic/blob/33960f1a5a98fc49525cfccc85f0847bf3a02de5/src/platform/cordova.scss#L48 -L50

Depurando en safari y vi esto.

@tcigrand no estoy seguro de dónde está viendo eso, pero ¿está usando app-scripts 3.0.0? Se corrigió un error insidioso en 3.0.1 donde las compilaciones --prod eliminaban algunos CSS: Correcciones de errores .

Estaba en 2.1.4, pero la actualización a 3.0.1 no parece solucionarlo.

Lo vi en las herramientas de desarrollo de safari al depurar una aplicación que se ejecutaba en un iPhone 8 Plus con iOS11.

En main.css obtengo las siguientes líneas.

.ios ion-menu > .menu-inner > ion-header > .toolbar.statusbar-padding:first-child {
  padding-top: calc(20px + 4px);
  padding-top: calc(constant(safe-area-inset-top) + 4px);
  padding-top: calc(env(safe-area-inset-top) + 4px);
  min-height: calc(44px + 20px);
  min-height: calc(44px + constant(safe-area-inset-top));
  min-height: calc(44px + env(safe-area-inset-top));
}

Mi pensamiento era que safari está viendo múltiples propiedades padding-top y min-height y luego usa la última. Para dispositivos que no son iPhoneX, querríamos usar padding-top: calc(20px + 4px); y min-height: calc(44px + 20px); . Para iPhoneX, querríamos usar las reglas con safe-area-inset-top .

@tcigrand Puede que esté en el camino correcto.

https://www.quirksmode.org/blog/archives/2017/10/safeareainset_v.html dice:

[..] safe-area-inset es 0 en dispositivos iOS11 que no son el iPhone X.

https://webkit.org/blog/7929/designing-websites-for-iphone-x/ dice:

Para los navegadores que no admiten env (), se ignorará la regla de estilo que lo incluye

Dos posibles explicaciones:

• Dado que su ejemplo de código muestra calc(env(safe-area-inset-top) + 4px); , eso podría resolverse en '4px' y tal vez esto todavía lo interpreten los navegadores que no admiten env ().
• env () se omite, pero la constante () aún se interpreta (también a juzgar por https://github.com/ionic-team/ionic/issues/13294#issuecomment-340918487)

No estoy desarrollando en Mac y no puedo verificar esto en este momento.

-

Por otra parte, aún podría ser un problema con Ionic Package, ya que https://github.com/ionic-team/ionic/issues/13294#issuecomment -340812401 no tenía el problema con una compilación local.

Pude acceder a una Mac y confirmé lo que @tcigrand encontró a través del inspector.

En un iPhone 5 con iOS 10, se ve así:

En un iPhone SE con iOS 11, se ve así:

Como puede ver, el iPhone SE con iOS 11 usa la regla con constante () donde safe-area-inset-top tiene un valor de 0.

Esto probablemente debería arreglarse en muchas más hojas de estilo iónicas, el grepping en la fuente iónica para constant(safe-area-inset-top) arrojó 9 resultados.

Estoy etiquetando a @mhartington por presentar estas líneas de CSS :)

Aquí hay una solución fea por el momento: https://gist.github.com/marcovtwout/145438116e17d20415a377d92db6ccab

Asegúrate de tener viewport-fit=cover en tu aplicación.

safe-area-inset es 0 en dispositivos iOS11 que no son el iPhone X.

No es realmente correcto. Cuando introduce el atributo correcto de ajuste de la ventana gráfica, hará que la ventana ocupe todo el espacio de la pantalla. Sin embargo, tan pronto como lo haga, las áreas seguras se activan y brindan el valor correcto.

Demo aquí

Y las reglas CSS aplicadas

Dado que su ejemplo de código muestra calc (env (safe-area-inset-top) + 4px);, eso podría resolverse en '4px' y tal vez esto todavía lo interpreten los navegadores que no admiten env ().
env () se omite, pero la constante () aún se interpreta (también a juzgar por # 13294 (comentario))

env y constant se usan ya que la constante solo estaba disponible para iOS 11.0, pero para iOS11.1, que se está implementando, la función ha cambiado a env , por lo que Necesito ambos por ahora.

viewport-fit=cover está presente en la metaetiqueta del código de ejemplo proporcionado, por lo que debe estar sucediendo algo más. ¿Probaste solo en iOS 11.1 (recién lanzado ayer) o también en 11.0.3?

He estado probando en todas las versiones de iOS 11 que se han lanzado y también en ios10.

@marcovtwout ¿ puede proporcionar un repositorio de git que tenga el mismo problema? ¿Con instrucciones muy detalladas? ¿Cómo puedo recrear?

@mhartington Mi código fuente se envió aquí https://github.com/ionic-team/ionic/issues/13294#issuecomment -340811372 y @kensodemann lo reprodujo solo en Ionic View: https://github.com/ionic-team / ionic / issues / 13294 # issuecomment -340847517

Resumiendo la experiencia anterior hasta ahora, aún podría ser que este problema solo exista en Ionic View / Ionic Package y no cuando se realiza una compilación local actualizada.

Me faltaba viewport-fit=cover , y al agregarlo solucionó el problema. ¡Gracias por la ayuda! Lamento estorbar este problema.

Probé y obtuve el mismo resultado con viewport-fit = cover ... cuando se ejecuta en el dispositivo, el relleno de la barra de estado desaparece.

Para reproducir, simplemente comienzo el proyecto iónico en blanco y lo ejecuto en el simulador y el dispositivo, no se cambió nada.

Xcode 8.3.3, simulador con iOS 10.3 y dispositivo con iOS 11.0.3.
Para la construcción solo se utilizó "ionic cordova build ios".

'
paquetes cli: (/ usr / local / lib / node_modules)

@ionic/cli-utils  : 1.12.0
ionic (Ionic CLI) : 3.12.0

paquetes globales:

cordova (Cordova CLI) : 7.0.1

paquetes locales:

@ionic/app-scripts : 3.0.1
Cordova Platforms  : ios 4.4.0
Ionic Framework    : ionic-angular 3.8.0

Sistema:

Android SDK Tools : 26.0.2
ios-sim           : 6.0.0 
Node              : v8.1.3
npm               : 5.3.0 
OS                : macOS Sierra
Xcode             : Xcode 8.3.3 Build version 8E3004b

Misc:

backend : pro

'

@LuizTokuhara No puedo replicar esto en absoluto. ¿Está implementando en el dispositivo a través de Ionic View o ionic cordova run ios

¿Puedes subir eso a github para que lo mire?

@mhartington
Acabo de comenzar un proyecto en blanco iónico, hice un "ios de compilación de cordova iónico", abrí el proyecto en Xcode y construí un Adhoc para probarlo en el dispositivo.

Hm, eso es exactamente lo que hice para intentar replicar. puedes correr

ionic cordova plugin ls

cordova-plugin-device 1.1.4 "Device" cordova-plugin-ionic-webview 1.1.16 "cordova-plugin-ionic-webview" cordova-plugin-splashscreen 4.0.3 "Splashscreen" cordova-plugin-whitelist 1.3.1 "Whitelist" ionic-plugin-keyboard 2.2.1 "Keyboard"

¿Quizás necesito actualizar algo?

Para mi eso da:

> cordova plugin ls
cordova-plugin-app-event 1.2.1 "Application Events"
cordova-plugin-camera 2.4.1 "Camera"
cordova-plugin-compat 1.2.0 "Compat"
cordova-plugin-device 1.1.6 "Device"
cordova-plugin-health 1.0.2 "Cordova Health"
cordova-plugin-ionic-webview 1.1.16 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 4.0.3 "Splashscreen"
cordova-plugin-statusbar 2.2.3 "StatusBar"
cordova-plugin-whitelist 1.3.2 "Whitelist"
cordova-sqlite-storage 2.0.4 "Cordova sqlite storage plugin"
de.appplant.cordova.plugin.local-notification 0.8.5 "LocalNotification"
ionic-plugin-keyboard 2.2.1 "Keyboard"

@mhartington
He subido la compilación de iOS que hice aquí, no sé si puedes probar y ver si hay algo diferente a tu compilación.
compilación de iOS

Aún así, se ve bien por mi parte 😞

Oh, eso es extraño ...
Permítanme instalar el último Xcode y ver si cambia algo.

@mhartington
Ok, después de actualizar a la última versión de Xcode, el relleno de la barra de estado está funcionando correctamente.
¿Quizás alguna compatibilidad con Xcode 8 ya que no tiene la última compatibilidad con iOS y iPhone X?

Para agregar a esto, también estoy experimentando lo que se describe en https://github.com/ionic-team/ionic/issues/13294#issuecomment -340847517.

Si construyo localmente y lo implemento en un dispositivo, todo está bien.
Si paso por Ionic View (o uso el servicio de compilación Ionic para obtener un .ipk), la barra de estado y el encabezado se superponen.

Entonces, en resumen, las herramientas de desarrollo de bibliotecas para Ionic Pro están desactualizadas. ¿Puede alguien de Ionic Pro confirmar que lo están arreglando? De lo contrario, tenemos que construir en nuestra máquina local por ahora.

No creo que el problema esté solo en Ionic Pro, ya que tengo este problema y no lo estoy usando en absoluto.

Veo este problema en las compilaciones de producción (--prod), pero no de otra manera cuando se construye con Xcode9. Ambos con comando de ejecución o compilación seguido de Xcode (que es lo que uso para cargar en la tienda). Ionic versión 3.8.0 y Ionic CLI 3.15.2. Probado en un dispositivo con iOS10.3 después de ser informado en un dispositivo con 11.

Línea de index.html:
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

Creo que en este punto cubrí todo, ¿verdad?

¿Qué versión de @ionic/app-scripts estás usando?

@marioestradarosa : ¿ha registrado un problema al respecto en el portal de soporte de Ionic Pro ? No sé si alguien del equipo de Ionic Pro estaría monitoreando activamente este repositorio de GitHub, pero lo estarán monitoreando.

@kensodemann Gracias, eso es lo que me he perdido. Todavía tenía 3.0.0 en lugar de 3.0.1.

@kensodemann Envié un informe con un enlace a este tema aquí, el viernes pasado.

@marcovtwout - ¡excelente! Gracias.

+1
Pasando por el mismo problema. Aún no se ha encontrado ninguna solución.

+1
y el viernes es la fecha límite para mi aplicación Oo

El mismo problema, aunque estoy usando app-scripts 3.0.1

solo configurar en config.xml

       <platform name="ios">
               <preference name="StatusBarOverlaysWebView" value="false" />
       </platform>

O use el complemento de la barra de estado

       this.statusBar.overlaysWebView(false);

¡Hola a todos! Finalmente capaz de reproducir esto. Es una combinación de versiones antiguas de xcode en Pro y las actualizaciones más recientes de iOS. Nos comunicaremos contigo sobre la actualización. ¡Aguanta!

@mhartington ¿ Alguna actualización?

@mhartington Estoy esperando una solución para esto también. ¿Alguna solución o solución alternativa que pueda probar?

Estoy usando esta solución alternativa hasta que se solucione: https://github.com/ionic-team/ionic/issues/13294#issuecomment -341067770

@marcovtwout muchas gracias. Leí algunos comentarios que decían que no les funcionó. Definitivamente estoy intentando esto cuando llegué a casa

estoy teniendo el mismo problema, mi fuente es con viewport-fit = cover

La solución de @yemenifree funcionó para mí. ¡Gracias!

Gracias, me encontré con esto después de actualizar ionic-cli.

Curiosamente, usar viewport-fit = cover funciona bien, a menos que pase de una página iónica a una modal a otra página. Luego, el relleno de la página final desaparece. Para solucionar esto, necesitaba usar la sugerencia de @yemenifree de this.statusBar.overlaysWebView(false);

Para su información, para mí, la sugerencia de config.xml no funciona, ya que cuando se ejecuta la preparación de ionic cordova se elimina de config.xml
<platform name="ios"> <preference name="StatusBarOverlaysWebView" value="false" /> </platform>

¿Alguna actualización para este problema?

Para mí no fue suficiente con content="viewport-fit=cover, ..." .
Así que agregué este también en el inicio de mi aplicación:
this.statusBar.overlaysWebView(false);

Lo probé en mi iPhone y todo se veía genial.
PERO, después de publicar en App Store, la aplicación se bloquea al inicio.

Solo quería que todos supieran que podría haber problemas al introducir esta solución ...

Tuve un problema similar y estaba usando el servicio PhoneGap Build. Esto es lo que tuve que hacer para solucionar el problema.

Actualice la siguiente línea en index.html de su proyecto iónico. Puede ver que agregué gap://ready file: en la metaetiqueta.

<meta http-equiv="Content-Security-Policy" content="default-src * gap://ready file:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *;img-src 'self' data: *">

Actualice el archivo config.xml con la siguiente preferencia para que funcione con iOS 11. No es necesario para iOS 10:
<platform name="ios"> <preference name="StatusBarOverlaysWebView" value="false" /> </platform>

¡Gracias por responder @dmgfjaved! La configuración de la plataforma en config.xml funcionó para mí. Me pregunto por qué no funcionó al hacer lo mismo en el código angular ...
También quería compartir que el problema que tuve con mi aplicación funcionando en la depuración, pero no cuando la publiqué en la tienda de aplicaciones, se reducía a la versión XCode. Durante mis pruebas usé la versión 9, pero cuando intenté lanzar la aplicación tuve problemas. La "solución" fue degradar XCode a la versión 8, por lo que cambió la compilación de la aplicación.

Todavía podemos reproducir este problema con la última versión de Ionic 3.9.2 y XCode Versión 8. ¿Se avecina alguna solución o tenemos que intentar solucionarla nosotros mismos?

Tengo el mismo problema
Tengo viewport-fit=cover y un resultado diferente en dispositivos reales

iPhone 7, ios 11.2 -> OK
iPhone 8, ios 11.2 -> Not OK

utilizando
@ionic/app-scripts: "3.0.0",
ionic: "3.13.0",

¡Hola a todos! Gracias por su continua paciencia y comentarios sobre este. Solo quería darles a ustedes una pequeña actualización sobre dónde estamos para solucionar esto en el lado de Ionic Pro:

1) Ionic View para iOS tuvo recientemente una nueva versión nativa (tendrá que actualizar a través de la App Store) que soluciona el problema del encabezado al revisar cosas en View.

2) Estamos trabajando activamente para solucionar esto en el lado del paquete iónico y es nuestra prioridad n. ° 1, ha sido un poco más complicado de lo normal porque estamos agregando simultáneamente una nueva función para no romper proyectos más antiguos arreglando el bicho:

3) Cuando llegue la solución para Ionic Package, podrá elegir XCode 8 o XCode 9 para tener el control total de lo que usamos para crear su aplicación. Continuaremos ampliando la biblioteca de configuraciones y versiones disponibles a lo largo del tiempo.

Esperamos un lanzamiento muy pronto, ¡gracias por tu comprensión!

Gracias,
Mate

PD: Sé mucho más sobre el lado Pro que el lado del marco local, si hay problemas para construir LOCALMENTE (sin usar el Paquete), recomiendo actualizar a XCode 9.

Gracias @matthewkremer : puedo confirmar que la actualización de xCode 8.3.3 a 9 resolvió mi problema en el que el relleno de la barra de estado no se aplicó cuando la aplicación se compiló localmente para el iPhone 6 con iOS 11.2.

Esto debería ser solucionado para todos los clientes Pro ahora.

Este problema aún persiste con la última versión de Ionic Native (4.5.2) y las últimas secuencias de comandos de la aplicación (3.1.7)

$ ionic info

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : 7.1.0 

local packages:

    @ionic/app-scripts : 3.1.7
    Cordova Platforms  : android 6.2.3 ios 4.5.4
    Ionic Framework    : ionic-angular 3.9.2

System:

    ios-deploy : 1.9.2 
    ios-sim    : 6.0.0 
    Node       : v6.11.4
    npm        : 5.5.1 
    OS         : OS X El Capitan
    Xcode      : Xcode 8.2.1 Build version 8C1002 

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : pro

@jzwcars Tienes que compilar usando Xcode 9 (tal vez eso debería estar documentado en algún lugar fuera de este problema)

desafortunadamente, no puedo construir mi aplicación con xcode 9 porque mi imac es demasiado viejo y no puedo actualizarlo a sierra. sin sierra no xcode 9 :-(

@nicolasborn En ese caso, puede utilizar el servicio de compilación Ionic Pro para compilar en línea. O utilice esta solución alternativa: https://github.com/ionic-team/ionic/issues/13294#issuecomment -341067770

@marcovtwout : Ionic Pro es demasiado caro para esto. Es un proyecto privado no remunerado. Estoy usando la solución alternativa y espero que también funcione para el iPhone x.

@marcovtwout El problema se "soluciona" cuando se usa Xcode 9.

Sin embargo, varios usuarios (incluyéndome a mí) todavía no pueden pasar a Xcode 9, ya sea debido a restricciones de SO / Hardware o simplemente porque compilar con Xcode 9 introduce una gran cantidad de problemas nuevos (por ejemplo, acerca de la firma automática, mensajes push ... .). Por lo tanto, apreciaríamos mucho si Xcode 8.x aún fuera compatible.

Puede parecer un problema menor de CSS / diseño, pero hace que la vida del desarrollo sea mucho más difícil para algunos de nosotros.

Todavía tengo espacio adicional en el hardware header @ ios 10.3 (iphone 5s, iphone7plus),
pero no hay espacio adicional en el emulador de iPhone.

`paquetes cli: (/ usr / local / lib / node_modules)

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

paquetes globales:

cordova (Cordova CLI) : 7.1.0

paquetes locales:

@ionic/app-scripts : 3.1.6
Cordova Platforms  : android 6.3.0 ios 4.5.4
Ionic Framework    : ionic-angular 3.9.2

Sistema:

ios-deploy : 1.9.2 
Node       : v9.3.0
npm        : 5.6.0 
OS         : macOS Sierra
Xcode      : Xcode 9.0 Build version 9A235 `

@sonicwong , abra un nuevo número con una aplicación de muestra cargada en github.

Pasé toda la tarde depurando la barra de estado y descubrí que no descomentaba la siguiente línea en index.html.

<!-- cordova.js required for cordova apps (remove if not needed) -->
<!--<script src="cordova.js"></script>-->

Al principio estaba desarrollando PWA con ionic. Empiezo a migrar mi PWA a la aplicación y luego me enfrento a este problema.

Todavía tengo este problema, pero curiosamente, cuando enfoco una entrada, parece corregirse solo. ¿Alguien más ha visto esto?

En este punto, no estoy seguro de qué intentar. Agregué las etiquetas de la ventana gráfica, probé las versiones JS y de configuración de StatusBarOverlaysWebView, e incluso reconfiguré todo mi proyecto desde cero. ¿Algunas ideas?

Todavía con este problema también. Intenté agregar this.statusBar.overlaysWebView(false); y también en config.xml , tengo content="viewport-fit=cover y actualicé mi Xcode a Version 9.3 (9E145)

paquetes cli: (/ usr / local / lib / node_modules)

@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0

paquetes globales:

cordova (Cordova CLI) : 8.0.0

paquetes locales:

@ionic/app-scripts : 3.1.8
Cordova Platforms  : android 7.0.0 ios 4.5.4
Ionic Framework    : ionic-angular 3.9.2

Sistema:

Android SDK Tools : 26.1.1
Node              : v8.9.4
npm               : 5.6.0 
OS                : macOS High Sierra

Complementos:

cordova-plugin-device 1.1.7 "Device"
cordova-plugin-file 6.0.1 "File"
cordova-plugin-file-opener2 2.0.19 "File Opener2"
cordova-plugin-fullscreen 1.1.0 "cordova-plugin-fullscreen"
cordova-plugin-inappbrowser 2.0.2 "InAppBrowser"
cordova-plugin-ionic-webview 1.1.16 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 4.1.0 "Splashscreen"
cordova-plugin-statusbar 2.4.1 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"
cordova-sqlite-storage 2.2.0 "Cordova sqlite storage plugin"
ionic-plugin-keyboard 2.2.1 "Keyboard"

Descubrí que hay un error de tamaño en el hardware iOS con os10.3. Todo sale bien después de actualizar el sistema operativo a 11.x. (sin error en el simulador)

¿Alguna noticia sobre cómo arreglarlo para xcode 8?

@mhartington finalmente he reproducido este problema, sucede cuando navega por una nueva página en modal, por favor revise esto https://github.com/ionic-team/ionic/issues/14401

También he estado experimentando este problema. Para mí, cuando ejecuto ionic cordova run ios funciona perfectamente, sin embargo, al implementar con XCode 9 estaba experimentando la superposición.

Encontré que en mi proyecto tenía marcada la configuración "requiere pantalla completa". Ver imagen

Después de desmarcar esta configuración y hacer otra compilación con XCode, se solucionó el problema. Espero que esto ayude.

este artículo puede ser útil
https://ayogo.com/blog/ios11-viewport/

Yo también experimenté este problema y después de aplicar statusBar.overlaysWebView(false); el problema se solucionó.

¡Gracias por el problema! Este problema se bloquea para evitar comentarios que no sean relevantes para el problema original. Si esto sigue siendo un problema con la última versión de Ionic, cree un nuevo problema y asegúrese de que la plantilla esté completa.