Ionic-framework: La barre d'état iOS 11 chevauche l'en-tête

Créé le 31 oct. 2017  ·  76Commentaires  ·  Source: ionic-team/ionic-framework

Version ionique : (cochez une case avec "x")
(Pour les problèmes Ionic 1.x, veuillez utiliser https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x] 3.x
[ ] 4.x

Je soumets un ... (cochez un avec "x")
[ x ] rapport de bogue
[ ] demande de fonctionnalité

Comportement actuel :
La barre d'état chevauche l'en-tête sur un iPhone SE avec iOS 11.
image

Comportement attendu:
L'en-tête doit avoir le bon rembourrage supérieur afin que le texte ne se chevauche pas.

Étapes à reproduire :

  • Créez une nouvelle application avec ionic start myApp tabs
  • Construire avec Ionic Pro et tester avec Ionic View

Informations ioniques : (exécutez ionic info partir d'une invite de terminal/cmd et collez la sortie ci-dessous) :

cli packages: (C:\Users\marco\AppData\Roaming\npm\node_modules)

    @ionic/cli-utils  : 1.15.2
    ionic (Ionic CLI) : 3.15.2

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

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

System:

    Node : v6.10.0
    npm  : 3.10.10
    OS   : Windows 10

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : pro

Commentaire le plus utile

Assurez-vous d'avoir viewport-fit=cover dans votre application.

safe-area-inset vaut 0 sur les appareils iOS11 qui ne sont pas l'iPhone X.

N'est pas vraiment correct. Lorsque vous introduisez le bon attribut d'ajustement de la fenêtre, la fenêtre occupera tout l'espace de l'écran. Dès que vous faites cela, les zones de sécurité entrent en jeu et fournissent la valeur correcte.

Démo ici
viewport

Et les règles CSS appliquées

screen shot 2017-11-01 at 7 57 45 am

Étant donné que votre exemple de code affiche calc(env(safe-area-inset-top) + 4px);, cela pourrait se résoudre en '4px' et peut-être que cela est toujours interprété par les navigateurs qui ne prennent pas en charge env().
env () est ignoré, mais constant () est toujours interprété (à en juger également par #13294 (commentaire))

env et constant sont tous deux utilisés car la constante n'était disponible que pour iOS 11.0, mais pour iOS11.1, qui est en cours de déploiement, la fonction est passée à env , nous besoin des deux pour le moment.

Tous les 76 commentaires

J'ai également essayé d'utiliser WkWebView en suivant ces instructions (https://github.com/ionic-team/cordova-plugin-ionic-webview#installation-instructions), mais cela n'a pas résolu le problème.

J'ai également essayé d'utiliser Ionic Package et de l'installer sur l'appareil, cela n'a pas fonctionné non plus.

Salut! Merci d'avoir ouvert un problème avec nous !

J'ai essayé de reproduire vos étapes à l'exception de la construction locale sur mon Mac au lieu d'utiliser IonicPro et cela a bien fonctionné. Donc, cela pourrait être un problème avec Ionic Pro.

Juste pour exclure les différences entre ce que j'ai généré et ce que vous avez, vous serait-il possible de télécharger votre exemple d'application sur GitHub afin que je puisse y jeter un œil ?

Merci d'avoir utilisé Ionic

Voici le code source : teststatusbar.zip (j'ai exclu les plateformes, plugins et www, c'est de ça qu'il vous faut ?)

Cela ne devrait pas avoir d'importance, mais pour être exact, j'ai utilisé ionic start myApp sidemenu au lieu de ionic start myApp tabs

Cela fonctionnera bien. Merci. Je vous dirai comment se passent mes tests.

Ton code a l'air bien. A tout ce qu'il faut, etc.

Construire localement sur mon Mac et s'exécuter sur un émulateur SE semble bien :

screen shot 2017-10-31 at 11 14 22 am

Cela peut être un problème avec Ionic Pro. Laissez-moi vérifier cela.

J'ai pu reproduire ce problème en :

  1. test de démarrage ionique-sidemenu sidemenu
  2. lien vers le compte Ionic Pro lorsqu'on lui a demandé de
  3. construire localement sur mon Mac et installer sur mon téléphone, tout fonctionne très bien
  4. pousser vers Ionic Pro, attendre la construction, afficher dans Ionic View, obtenir un problème d'encombrement de la barre d'état

Attribué au mainteneur de View pour y jeter un œil.

Je rencontre la même chose, je crois que ces lignes sont le coupable. https://github.com/ionic-team/ionic/blob/33960f1a5a98fc49525cfccc85f0847bf3a02de5/src/platform/cordova.scss#L48 -L50

Débogage dans safari et j'ai vu ça.
image

image

@tcigrand ne sait pas où vous voyez cela, mais utilisez-vous des scripts d'application 3.0.0 ? Il y avait un bogue insidieux corrigé dans 3.0.1 où les builds --prod supprimaient certains CSS : Bug Fixes .

J'étais sur 2.1.4, mais la mise à jour vers 3.0.1 ne semble pas le résoudre.

J'ai vu cela dans les outils de développement de safari lors du débogage d'une application s'exécutant sur un iPhone 8 Plus avec iOS11.

Dans main.css j'obtiens les lignes suivantes.

.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));
}

Ma pensée était que safari voit plusieurs propriétés padding-top et min-height , puis il utilise la dernière. Pour les appareils non iPhoneX, nous voudrions utiliser padding-top: calc(20px + 4px); et min-height: calc(44px + 20px); . Pour iPhoneX, nous voudrions utiliser les règles avec safe-area-inset-top .

@tcigrand Vous êtes peut-être sur la bonne voie.

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

[..] safe-area-inset est 0 sur les appareils iOS11 qui ne sont pas l'iPhone X.

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

Pour les navigateurs qui ne prennent pas en charge env(), la règle de style qui l'inclut sera ignorée

Deux explications possibles :

  • Étant donné que votre exemple de code affiche calc(env(safe-area-inset-top) + 4px); , cela pourrait se résoudre en '4px' et peut-être que cela est toujours interprété par les navigateurs qui ne prennent pas en charge env().
  • env () est ignoré, mais constant () est toujours interprété (à en juger également par https://github.com/ionic-team/ionic/issues/13294#issuecomment-340918487)

Je ne développe pas sur Mac et je ne suis pas en mesure de le vérifier pour le moment.

--

Là encore, cela pourrait toujours être un problème avec Ionic Package, car https://github.com/ionic-team/ionic/issues/13294#issuecomment -340812401 n'a pas eu le problème avec une version locale.

J'ai pu accéder à un Mac et confirmé ce que @tcigrand a trouvé via l'inspecteur.

Sur un iPhone 5 avec iOS 10, cela ressemble à ceci :
image

Sur un iPhone SE avec iOS 11, cela ressemble à ceci :
image

Comme vous pouvez le voir, l'iPhone SE avec iOS 11 utilise la règle avec constant() où safe-area-inset-top a une valeur de 0.

Cela devrait probablement être corrigé dans de nombreuses autres feuilles de style ioniques, la recherche de la source ionique pour constant(safe-area-inset-top) renvoyé 9 résultats.

Je tague @mhartington pour avoir présenté ces lignes de css :)

Voici une solution de contournement laide pour le moment : https://gist.github.com/marcovtwout/145438116e17d20415a377d92db6ccab

Assurez-vous d'avoir viewport-fit=cover dans votre application.

safe-area-inset vaut 0 sur les appareils iOS11 qui ne sont pas l'iPhone X.

N'est pas vraiment correct. Lorsque vous introduisez le bon attribut d'ajustement de la fenêtre, la fenêtre occupera tout l'espace de l'écran. Dès que vous faites cela, les zones de sécurité entrent en jeu et fournissent la valeur correcte.

Démo ici
viewport

Et les règles CSS appliquées

screen shot 2017-11-01 at 7 57 45 am

Étant donné que votre exemple de code affiche calc(env(safe-area-inset-top) + 4px);, cela pourrait se résoudre en '4px' et peut-être que cela est toujours interprété par les navigateurs qui ne prennent pas en charge env().
env () est ignoré, mais constant () est toujours interprété (à en juger également par #13294 (commentaire))

env et constant sont tous deux utilisés car la constante n'était disponible que pour iOS 11.0, mais pour iOS11.1, qui est en cours de déploiement, la fonction est passée à env , nous besoin des deux pour le moment.

viewport-fit=cover est présent dans la balise meta de l'exemple de code fourni, donc quelque chose d'autre doit se passer. Avez-vous testé uniquement sur iOS 11.1 (qui vient de sortir hier) ou aussi 11.0.3 ?

J'ai testé toutes les versions d'iOS 11 qui ont été publiées ainsi que ios10.

@marcovtwout pouvez-vous fournir un

@mhartington Mon code source a été soumis ici https://github.com/ionic-team/ionic/issues/13294#issuecomment -340811372 et @kensodemann l'a reproduit uniquement dans Ionic View : https://github.com/ionic-team /ionic/issues/13294#issuecomment -340847517

En résumant l'expérience ci-dessus jusqu'à présent, il se peut que ce problème n'existe que dans Ionic View / Ionic Package et non lors d'une version locale à jour.

Il me manquait viewport-fit=cover , l'ajouter a résolu le problème. Merci pour l'aide! Désolé d'encombrer ce problème.

J'ai testé et obtenu le même résultat avec viewport-fit=cover... lors de l'exécution sur l'appareil, le remplissage de la barre d'état a disparu.

Pour reproduire, je viens de démarrer le projet ionique vierge et de l'exécuter sur le simulateur et l'appareil, rien n'a été changé.

Xcode 8.3.3, simulateur exécutant iOS 10.3 et appareil avec iOS 11.0.3.
Pour la construction, venez d'utiliser "ionic cordova build ios".

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

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

forfaits mondiaux :

cordova (Cordova CLI) : 7.0.1

forfaits locaux :

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

Système:

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

Divers :

backend : pro

`

ionic-header

screen shot 2017-11-03 at 13 37 38

@LuizTokuhara, je ne suis pas du tout capable de reproduire cela. Déployez-vous sur l'appareil via Ionic View ou ionic cordova run ios

img_5392

Pouvez-vous pousser cela vers github pour que je le regarde ?

@mhartington
Je viens de démarrer un projet ionic blank, de créer un "ionic cordova build ios", d'ouvrir le projet dans Xcode et de créer un Adhoc à tester sur l'appareil.

Hm, c'est exactement ce que j'ai fait pour essayer de reproduire. peux-tu courrir

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"

Peut-être que je dois mettre à niveau quelque chose ?

Pour moi ça donne :

> 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
J'ai téléchargé la version ios que j'ai créée ici, je ne sais pas si vous pouvez tester et voir s'il y a quelque chose de différent de votre version.
Version iOS

Pourtant, ça a l'air bien de mon côté

Oh, c'est étrange...
Laissez-moi simplement installer le dernier Xcode et voir si cela change quelque chose.

@mhartington
Ok, après la mise à niveau vers le dernier Xcode, le remplissage de la barre d'état fonctionne bien !!!
Peut-être une certaine compatibilité avec Xcode 8 car il n'a pas le dernier support iOS et iPhone X ?

Pour ajouter à cela, je vis également ce qui est décrit dans https://github.com/ionic-team/ionic/issues/13294#issuecomment -340847517.

Si je construis localement et que je déploie sur un appareil, tout va bien.
Si je passe par Ionic View (ou que j'utilise le service de construction Ionic pour obtenir un .ipk), la barre d'état et l'en-tête se chevauchent.

Donc, en résumé, les outils de développement de bibliothèque pour Ionic Pro sont obsolètes. Quelqu'un d'Ionic Pro peut-il confirmer qu'il est en train de le réparer ? Ou bien, nous devons intégrer notre machine locale pour le moment.

Je ne pense pas que le problème soit uniquement dans Ionic Pro car j'ai ce problème et je ne l'utilise pas du tout.

Je vois ce problème sur les versions de production (--prod), mais pas autrement lorsqu'il est construit avec Xcode9. Les deux avec la commande run ou build suivis de Xcode (c'est ce que j'utilise pour le téléchargement vers le stockage). Ionic version 3.8.0 et Ionic CLI 3.15.2. Testé sur un appareil exécutant iOS10.3 après avoir été signalé sur un appareil exécutant 11.

Ligne 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">

Je pense qu'à ce stade, j'ai tout couvert, non?

Quelle version de @ionic/app-scripts utilisez-vous ?

@marioestradarsa - avez-vous portail d'assistance Ionic Pro ? Je ne sais pas si l'un des membres de l'équipe Ionic Pro surveillerait activement ce référentiel GitHub, mais ils le surveilleront.

@kensodemann Merci, c'est ce que j'ai manqué. J'avais toujours 3.0.0 au lieu de 3.0.1.

@kensodemann J'ai soumis un rapport

@marcovtwout - excellent ! Merci.

+1
Passer par le même problème. Aucune solution trouvée pour le moment.

+1
et vendredi est la date limite pour mon application Oo

Même problème, j'utilise cependant app-scripts 3.0.1

juste défini dans config.xml

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

Ou utilisez le plugin de barre d'état

       this.statusBar.overlaysWebView(false);

Salut tout le monde! Enfin capable de reproduire cela. C'est un mélange d'anciennes versions de xcode sur Pro et des nouvelles mises à jour iOS. Nous vous contacterons pour la mise à jour. Tenir fermement!

@mhartington Des mises à jour ?

@mhartington J'attends une solution pour cela aussi. Des solutions ou des solutions de contournement que je peux essayer?

J'utilise cette solution de contournement jusqu'à ce qu'elle soit corrigée : https://github.com/ionic-team/ionic/issues/13294#issuecomment -341067770

@marcovtwout merci beaucoup. J'ai lu quelques commentaires disant que cela ne fonctionnait pas pour eux. J'essaye définitivement ça quand je rentre à la maison

j'ai le même problème, ma source est avec viewport-fit = cover

La solution de @yemenifree a fonctionné pour moi. Merci!

Merci, je suis tombé sur cela après la mise à jour de ionic-cli.

Fait intéressant, l'utilisation de viewport-fit=cover fonctionne bien, à moins que vous ne passiez d'une page ionique à une page modale à une autre. Ensuite, le remplissage de la dernière page a disparu. Pour résoudre ce problème, j'avais besoin d'utiliser la suggestion @yemenifree de this.statusBar.overlaysWebView(false);

Pour info, pour moi, la suggestion config.xml ne fonctionne pas car lorsque ionic cordova prepare est exécuté, il est supprimé de config.xml
<platform name="ios"> <preference name="StatusBarOverlaysWebView" value="false" /> </platform>

Des mises à jour pour ce problème ?

Pour moi, ce n'était pas suffisant avec content="viewport-fit=cover, ..." .
J'ai donc ajouté celui-ci également au démarrage de mon application :
this.statusBar.overlaysWebView(false);

Je l'ai testé sur mon iPhone et tout était parfait.
MAIS, après la publication sur l'App Store, l'application plante au démarrage !!!

Je voulais juste que vous sachiez tous qu'il pourrait y avoir des problèmes pour introduire ce correctif...

J'ai eu un problème similaire et j'utilisais le service PhoneGap Build. Voici ce que j'ai dû faire pour résoudre le problème.

Mettez à jour la ligne suivante dans index.html de votre projet ionique. Vous pouvez voir que j'ai ajouté gap://ready file: dans la balise meta.

<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: *">

Mettez à jour le fichier config.xml avec la préférence suivante afin de le faire fonctionner avec iOS 11. Non requis pour iOS 10 :
<platform name="ios"> <preference name="StatusBarOverlaysWebView" value="false" /> </platform>

Merci d'avoir répondu @dmgfjaved ! Le paramètre de plate-forme dans config.xml a fonctionné pour moi. Je me demande pourquoi cela n'a pas fonctionné en faisant la même chose dans le code angulaire...
Je voulais également partager que le problème que j'avais avec mon application fonctionnant en débogage mais pas lors de sa publication sur l'App Store, était dû à la version XCode. Lors de mes tests, j'avais utilisé la version 9, mais lorsque j'ai essayé de publier l'application, j'ai eu des problèmes. La "solution" consistait à rétrograder XCode vers la version 8, ce qui a modifié la compilation de l'application.

Nous pouvons toujours reproduire ce problème en utilisant les dernières versions Ionic 3.9.2 et XCode 8. Y a-t-il un correctif à venir ou devons-nous essayer de le résoudre nous-mêmes ?

j'ai le même problème
J'ai viewport-fit=cover , et un résultat différent sur de vrais appareils

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

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

Salut tout le monde! Merci pour votre patience continue et vos commentaires sur celui-ci. Je voulais juste vous donner une petite mise à jour sur où nous en sommes pour résoudre ce problème du côté Ionic Pro :

1) Ionic View pour iOS a récemment eu une nouvelle version native (vous devrez mettre à jour via l'App Store) qui résout le problème d'en-tête lors de la vérification des éléments dans View.

2) Nous travaillons activement à résoudre ce problème du côté du package ionique et c'est notre priorité n ° 1, cela a été un peu plus impliqué que la normale car nous ajoutons simultanément une nouvelle fonctionnalité afin de ne pas casser des projets plus anciens en corrigeant le punaise:

3) Lorsque le correctif pour Ionic Package arrivera, vous pourrez choisir XCode 8 ou XCode 9 afin que vous contrôliez totalement ce que nous utilisons pour créer votre application. Nous continuerons à développer la bibliothèque des configurations et des versions disponibles au fil du temps.

Nous espérons une sortie assez prochainement, merci de votre compréhension !

Merci,
Mat

PS J'en sais beaucoup plus sur le côté Pro que sur le côté framework local, s'il y a des problèmes de construction LOCALEMENT (sans utiliser le package), je recommande de passer à XCode 9.

Merci @matthewkremer - Je peux confirmer que la mise à jour de xCode 8.3.3 à 9 a résolu mon problème où le remplissage de la barre d'état n'était pas appliqué lorsque l'application a été créée localement pour l'iPhone 6 exécutant iOS 11.2.

Cela devrait être pris en charge pour tous les clients Pro maintenant.

Ce problème persiste avec le dernier Ionic Native (4.5.2) et les derniers scripts d'application (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 Vous devez construire en utilisant Xcode 9 (cela devrait peut-être être documenté quelque part en dehors de ce problème)

Malheureusement, je ne peux pas créer mon application avec xcode 9 car mon imac est trop ancien et je ne peux pas le mettre à jour vers Sierra. sans sierra pas de xcode 9 :-(

@nicolasborn Dans ce cas, vous pouvez utiliser le service de construction Ionic Pro pour construire en ligne. Ou utilisez cette solution de contournement : https://github.com/ionic-team/ionic/issues/13294#issuecomment -341067770

@marcovtwout : Ionic Pro est trop cher pour ça. C'est un projet privé non rémunéré. J'utilise la solution de contournement et j'espère qu'elle fonctionnera également pour l'iPhone x.

@marcovtwout Le problème est "résolu" lors de l'utilisation de Xcode 9.

Pourtant, un certain nombre d'utilisateurs (dont moi) ne peuvent pas encore passer à Xcode 9, soit en raison de restrictions OS/matériel, soit simplement parce que la compilation avec Xcode 9 introduit tout un tas de nouveaux problèmes (par exemple, à propos de la signature automatique, des messages push.. .). Par conséquent, nous apprécierions vraiment que Xcode 8.x soit toujours pris en charge.

Cela peut sembler être un problème mineur de CSS / de mise en page, mais cela rend la vie de développement beaucoup plus difficile pour bon nombre d'entre nous.

J'ai toujours de l'espace supplémentaire dans l'en-tête du matériel ios 10.3 (iphone 5s, iphone7plus),
mais pas d'espace supplémentaire dans l'émulateur iphone.

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

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

forfaits mondiaux :

cordova (Cordova CLI) : 7.1.0

forfaits locaux :

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

Système:

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

@sonicwong, veuillez ouvrir un nouveau numéro avec un exemple de téléchargement d'application sur github.

J'ai passé tout l'après-midi à déboguer la barre d'état et j'ai découvert que je n'avais pas décommenté la ligne suivante dans index.html.

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

Au début, je développais PWA avec ionic. Je commence à migrer mon PWA vers l'application, puis je suis confronté à ce problème.

J'ai toujours ce problème, mais il est intéressant de noter que lorsque je concentre une entrée, elle semble se corriger d'elle-même. Quelqu'un d'autre a-t-il vu cela?

À ce stade, je ne sais pas quoi essayer. J'ai ajouté les balises viewport, essayé les versions JS et config de StatusBarOverlaysWebView et même reconfiguré l'ensemble de mon projet à partir de zéro. Des idées?

Toujours avec ce problème aussi. J'ai essayé d'ajouter this.statusBar.overlaysWebView(false); et aussi dans le config.xml , j'ai le content="viewport-fit=cover et j'ai mis à jour mon Xcode en Version 9.3 (9E145)

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

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

forfaits mondiaux :

cordova (Cordova CLI) : 8.0.0

forfaits locaux :

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

Système:

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

Plugins :

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"

J'ai trouvé qu'il y avait une erreur de taille dans le matériel iOS avec os10.3. Tout se passe bien après la mise à niveau de l'os vers 11.x. (pas d'erreur dans le simulateur)

Des nouvelles de la correction pour xcode 8 ?

@mhartington j'ai enfin reproduit ce problème, cela se produit lorsque vous naviguez sur une nouvelle page en modal, veuillez vérifier ceci https://github.com/ionic-team/ionic/issues/14401

J'ai également connu ce problème. Pour moi, lorsque j'exécute ionic cordova run ios cela fonctionne parfaitement, cependant, lors du déploiement avec XCode 9, je rencontrais le chevauchement.

J'ai trouvé que dans mon projet, le paramètre "nécessite le plein écran" était coché. Voir image.
screenshot of incorrect setting

Après avoir décoché ce paramètre et créé une autre version avec XCode, le problème a été résolu. J'espère que cela t'aides.

cet article peut être utile
https://ayogo.com/blog/ios11-viewport/

J'ai également rencontré ce problème et après avoir appliqué statusBar.overlaysWebView(false); le problème a été résolu.

Merci pour le problème ! Ce problème est verrouillé pour empêcher les commentaires qui ne sont pas pertinents pour le problème d'origine. Si le problème persiste avec la dernière version d'Ionic, veuillez créer un nouveau problème et vous assurer que le modèle est entièrement rempli.

Cette page vous a été utile?
0 / 5 - 0 notes