Ionic-framework: Bilah status iOS 11 tumpang tindih dengan header

Saya juga mencoba menggunakan WkWebView mengikuti instruksi ini ( https://github.com/ionic-team/cordova-plugin-ionic-webview#installation-instructions ), tetapi ini tidak menyelesaikan masalah.

Saya juga mencoba menggunakan Paket Ionic dan menginstal di perangkat, tidak berhasil juga.

Halo! Terima kasih telah membuka masalah dengan kami!

Saya mencoba langkah-langkah Anda untuk mereproduksi dengan pengecualian membangun secara lokal di Mac saya alih-alih menggunakan IonicPro dan itu berfungsi dengan baik. Jadi, ini bisa menjadi masalah dengan Ionic Pro.

Hanya untuk mengesampingkan perbedaan antara apa yang saya buat dan apa yang Anda miliki, apakah mungkin bagi Anda untuk mengunggah aplikasi sampel Anda ke GitHub sehingga saya bisa melihatnya?

Terima kasih telah menggunakan Ionic

Ini kode sumbernya: teststatusbar.zip (Saya mengecualikan platform, plugin, dan www, apakah itu yang Anda butuhkan?)

Ini seharusnya tidak masalah, tetapi tepatnya saya menggunakan ionic start myApp sidemenu alih-alih ionic start myApp tabs

Itu akan bekerja dengan baik. Terima kasih. Saya akan memberi tahu Anda bagaimana tes saya berjalan.

Kode Anda terlihat baik-baik saja. Memiliki semua yang seharusnya, dll.

Membangun secara lokal di Mac saya dan menjalankan emulator SE terlihat bagus:

Ini mungkin masalah dengan Ionic Pro. Biarkan saya memeriksa itu.

Saya dapat menduplikasi masalah ini dengan:

1. menu samping menu sisi uji mulai ionik
2. tautkan ke akun Ionic Pro saat diminta
3. buat lokal ke Mac saya dan instal di ponsel saya, semuanya berfungsi dengan baik
4. dorong ke Ionic Pro, tunggu build, lihat di Ionic View, dapatkan masalah crowding bilah status

Ditugaskan ke pengelola View untuk melihatnya.

Saya mengalami hal yang sama, saya percaya garis-garis ini adalah pelakunya. https://github.com/ionic-team/ionic/blob/33960f1a5a98fc49525cfccc85f0847bf3a02de5/src/platform/cordova.scss#L48 -L50

Debugging di safari dan melihat ini.

@tcigrand tidak yakin di mana Anda melihatnya, tetapi apakah Anda menggunakan skrip aplikasi 3.0.0? Ada bug berbahaya yang diperbaiki di 3.0.1 di mana --prod build menghapus beberapa CSS: Perbaikan Bug .

Saya menggunakan 2.1.4, tetapi memperbarui ke 3.0.1 sepertinya tidak memperbaikinya.

Saya melihatnya di alat pengembang safari saat men-debug aplikasi yang berjalan di iPhone 8 Plus dengan iOS11.

Di main.css Saya mendapatkan baris berikut.

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

Pikiran saya adalah bahwa safari melihat beberapa properti padding-top dan min-height dan kemudian menggunakan yang terakhir. Untuk perangkat non-iPhoneX, kami ingin menggunakan padding-top: calc(20px + 4px); dan min-height: calc(44px + 20px); . Untuk iPhoneX kami ingin menggunakan aturan dengan safe-area-inset-top .

@tcigrand Anda mungkin berada di jalur yang benar.

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

[..] safe-area-inset adalah 0 pada perangkat iOS11 yang bukan iPhone X.

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

Untuk browser yang tidak mendukung env(), aturan gaya yang menyertakannya akan diabaikan

Dua kemungkinan penjelasan:

• Karena contoh kode Anda menunjukkan calc(env(safe-area-inset-top) + 4px); , itu dapat diselesaikan menjadi '4px' dan mungkin ini masih ditafsirkan oleh browser yang tidak mendukung env().
• env() dilewati, tetapi constant() masih ditafsirkan (juga dilihat dari https://github.com/ionic-team/ionic/issues/13294#issuecomment-340918487)

Saya tidak mengembangkan di Mac dan saya tidak dapat memverifikasi ini sekarang.

--

Kemudian lagi, itu masih bisa menjadi masalah dengan Paket Ionic, karena https://github.com/ionic-team/ionic/issues/13294#issuecomment -340812401 tidak memiliki masalah dengan build lokal.

Saya dapat mengakses Mac dan mengonfirmasi apa yang ditemukan @tcigrand melalui inspektur.

Pada iPhone 5 dengan iOS 10, tampilannya seperti ini:

Pada iPhone SE dengan iOS 11, tampilannya seperti ini:

Seperti yang Anda lihat, iPhone SE dengan iOS 11 menggunakan aturan dengan constant() di mana safe-area-inset-top memiliki nilai 0.

Ini mungkin harus diperbaiki di lebih banyak lembar gaya ionik, mengambil sumber ionik untuk constant(safe-area-inset-top) mengembalikan 9 hasil.

Saya menandai @mhartington karena memperkenalkan baris css ini :)

Inilah solusi buruk untuk saat ini: https://Gist.github.com/marcovtwout/145438116e17d20415a377d92db6ccab

Pastikan Anda memiliki viewport-fit=cover di aplikasi Anda.

safe-area-inset adalah 0 pada perangkat iOS11 yang bukan iPhone X.

Tidak benar-benar benar. Saat Anda memperkenalkan atribut viewport-fit yang benar, itu akan membuat viewport mengambil seluruh ruang layar. Segera setelah Anda melakukannya, area aman masuk dan memberikan nilai yang benar.

Demo disini

Dan aturan css yang diterapkan

Karena sampel kode Anda menunjukkan calc(env(safe-area-inset-top) + 4px);, itu dapat diselesaikan menjadi '4px' dan mungkin ini masih ditafsirkan oleh browser yang tidak mendukung env().
env() dilewati, tetapi constant() masih ditafsirkan (juga dilihat dari #13294 (komentar))

env dan constant keduanya digunakan karena konstanta hanya tersedia untuk iOS 11.0, tetapi untuk iOS11.1, yang sedang diluncurkan, fungsinya telah berubah menjadi env , jadi kami membutuhkan keduanya untuk saat ini.

viewport-fit=cover ada di tag meta dari kode contoh yang diberikan, jadi sesuatu yang lain harus terjadi. Apakah Anda hanya menguji di iOS 11.1 (baru dirilis kemarin) atau juga 11.0.3?

Saya telah menguji pada setiap versi iOS 11 yang telah dirilis dan juga ios10.

@marcovtwout dapatkah Anda memberikan git repo yang memiliki masalah yang sama? Dengan instruksi yang sangat rinci? Bagaimana saya bisa membuat ulang?

@mhartington Kode sumber saya dikirimkan di sini https://github.com/ionic-team/ionic/issues/13294#issuecomment -340811372 dan @kensodemann mereproduksinya hanya dalam Ionic View: https://github.com/ionic-team /ionic/issues/13294#issuecomment -340847517

Meringkas pengalaman di atas sejauh ini, mungkin saja masalah ini hanya ada di Ionic View / Ionic Package dan tidak saat melakukan build lokal yang up-to-date.

Saya kehilangan viewport-fit=cover , menambahkannya memperbaiki masalah. Terima kasih untuk bantuannya! Maaf mengacaukan masalah ini.

Saya telah menguji dan mendapatkan hasil yang sama dengan viewport-fit=cover... saat berjalan di perangkat, bantalan bilah status hilang.

Untuk mereproduksi saya baru saja memulai proyek ionik kosong dan menjalankannya di simulator dan perangkat, tidak ada yang berubah.

Xcode 8.3.3, simulator yang menjalankan iOS 10.3 dan perangkat dengan iOS 11.0.3.
Untuk build cukup gunakan "ionic cordova build ios".

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

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

paket global:

cordova (Cordova CLI) : 7.0.1

paket lokal:

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

Sistem:

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

Lain-lain:

backend : pro

`

@LuizTokuhara Saya tidak dapat meniru ini sama sekali. Apakah Anda menerapkan ke perangkat melalui Ionic View atau ionic cordova run ios

Bisakah Anda mendorongnya ke github untuk saya lihat?

@mhartington
Saya baru saja memulai proyek kosong ionik, membuat "ionik cordova build ios", buka proyek di Xcode dan buat Adhoc untuk diuji di perangkat.

Hm, itulah yang saya lakukan untuk mencoba meniru. bisakah kamu lari?

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"

Mungkin saya perlu meningkatkan sesuatu?

Bagi saya yang memberi:

> 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
Saya telah mengunggah ios build yang saya buat di sini, tidak tahu apakah Anda dapat menguji dan melihat apakah ada sesuatu yang berbeda dari build Anda.
membangun iOS

Tetap saja, terlihat baik-baik saja di pihakku

Ah, itu aneh...
Biarkan saya menginstal Xcode terbaru dan melihat apakah itu mengubah apa pun.

@mhartington
Ok, setelah memutakhirkan ke Xcode terbaru, padding bilah status berjalan ok!!!
Mungkin ada kompatibilitas dengan Xcode 8 karena tidak memiliki dukungan iOS dan iPhone X terbaru?

Untuk menambah ini, saya juga mengalami apa yang dijelaskan di https://github.com/ionic-team/ionic/issues/13294#issuecomment -340847517 .

Jika saya membangun secara lokal, dan menyebarkan ke perangkat, semuanya baik-baik saja.
Jika saya melalui Ionic View (atau menggunakan layanan build Ionic untuk mendapatkan .ipk), bilah status dan header tumpang tindih.

Jadi secara ringkas, alat pengembangan perpustakaan untuk Ionic Pro sudah ketinggalan zaman. Bisakah seseorang dari Ionic Pro mengonfirmasi bahwa mereka sedang memperbaikinya?, atau yang lain, Kami harus membangun mesin lokal kami untuk saat ini.

Saya tidak berpikir masalahnya hanya di Ionic Pro karena saya memiliki masalah ini dan saya tidak menggunakannya sama sekali.

Saya melihat masalah ini pada build produksi (--prod), tetapi tidak sebaliknya ketika dibangun dengan Xcode9. Baik dengan menjalankan perintah atau membangun diikuti oleh Xcode (yang saya gunakan untuk mengunggah ke toko). Ionic versi 3.8.0 dan Ionic CLI 3.15.2. Diuji pada perangkat yang menjalankan iOS10.3 setelah dilaporkan pada perangkat yang menjalankan 11.

Baris dari 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">

Saya pikir pada titik ini saya membahas semuanya, bukan?

Apa versi @ionic/app-scripts yang Anda gunakan?

@marioestradarosa - Portal Dukungan Ionic Pro ? Saya tidak tahu apakah ada tim Ionic Pro yang akan secara aktif memantau repo GitHub ini, tetapi mereka akan memantaunya.

@kensodemann Terima kasih, itu yang saya lewatkan. Masih memiliki 3.0.0 bukannya 3.0.1.

@kensodemann Saya mengirimkan laporan yang menautkan ke masalah ini di sini, Jumat lalu.

@marcovtwout - luar biasa! Terima kasih.

+1
Mengalami masalah yang sama. Belum ada solusi yang ditemukan.

+1
dan jumat adalah batas waktu untuk aplikasi saya Oo

Masalah yang sama, saya menggunakan skrip aplikasi 3.0.1

atur saja di config.xml

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

Atau gunakan plugin bilah status

       this.statusBar.overlaysWebView(false);

Hai semuanya! Akhirnya bisa mereproduksi ini. Ini adalah campuran dari versi xcode lama di Pro dan pembaruan iOS yang lebih baru. Kami akan menghubungi Anda tentang pembaruan. Berpegangan kuat!

@mhartington Ada pembaruan?

@mhartington Saya juga menunggu solusi untuk ini. Adakah solusi atau solusi yang bisa saya coba?

Saya menggunakan solusi ini hingga diperbaiki: https://github.com/ionic-team/ionic/issues/13294#issuecomment -341067770

@marcovtwout terima kasih banyak. Saya membaca beberapa komentar yang mengatakan itu tidak berhasil untuk mereka. Saya pasti mencoba ini ketika saya pulang

saya mengalami masalah yang sama, sumber saya dengan viewport-fit = cover

Solusi @yemenifree bekerja untuk saya. Terima kasih!

Terima kasih, bertemu ini setelah memperbarui ionic-cli.

Menariknya, menggunakan viewport-fit=cover berfungsi dengan baik, kecuali jika Anda berpindah dari halaman ionik ke modal ke halaman lain. Kemudian padding halaman terakhir hilang. Untuk memperbaikinya saya perlu menggunakan saran @yemenifree this.statusBar.overlaysWebView(false);

FYI, bagi saya, saran config.xml tidak berfungsi seperti ketika persiapan cordova ionik dijalankan dihapus dari config.xml
<platform name="ios"> <preference name="StatusBarOverlaysWebView" value="false" /> </platform>

Adakah pembaruan untuk masalah ini?

Bagi saya itu tidak cukup dengan content="viewport-fit=cover, ..." .
Jadi saya menambahkan yang ini juga di startup aplikasi saya:
this.statusBar.overlaysWebView(false);

Saya mengujinya di iPhone saya dan semuanya tampak hebat.
TAPI, setelah dipublikasikan ke App Store, aplikasi mogok saat startup!!!

Hanya ingin Anda semua tahu bahwa mungkin ada masalah dalam memperkenalkan perbaikan ini...

Saya memiliki masalah serupa dan saya menggunakan layanan PhoneGap Build. Inilah yang harus saya lakukan untuk memperbaiki masalah ini.

Perbarui baris berikut di index.html proyek ionik Anda. Anda dapat melihat saya telah menambahkan gap://ready file: di tag 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: *">

Perbarui file config.xml dengan preferensi berikut untuk membuatnya berfungsi dengan iOS 11. Tidak diperlukan untuk iOS 10:
<platform name="ios"> <preference name="StatusBarOverlaysWebView" value="false" /> </platform>

Terima kasih telah membalas @dmgfjaved! Pengaturan platform di config.xml berfungsi untuk saya. Bertanya-tanya mengapa itu tidak berhasil ketika melakukan hal yang sama dalam kode sudut ...
Saya juga ingin berbagi bahwa masalah yang saya miliki dengan aplikasi saya yang berfungsi di debug tetapi tidak ketika dipublikasikan ke app store, turun ke versi XCode. Saya selama pengujian saya menggunakan versi 9, tetapi ketika saya mencoba untuk merilis aplikasi saya mendapat masalah. "Solusinya" adalah menurunkan versi XCode ke versi 8, sehingga mengubah kompilasi aplikasi.

Kami masih dapat mereproduksi masalah ini menggunakan Ionic 3.9.2 dan XCode Versi 8 terbaru. Apakah ada perbaikan yang akan datang atau apakah kami harus mencoba dan memperbaikinya sendiri?

Saya memiliki masalah yang sama
Saya memiliki viewport-fit=cover , dan hasil yang berbeda pada perangkat nyata

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

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

Hai semuanya! Terima kasih atas kesabaran dan umpan balik Anda yang berkelanjutan untuk yang satu ini. Hanya ingin memberi Anda sedikit pembaruan tentang di mana kami berada dengan memperbaiki ini di sisi Ionic Pro:

1) Ionic View untuk iOS baru-baru ini memiliki rilis asli baru (Anda harus memperbarui melalui App Store) yang memperbaiki masalah header saat memeriksa barang di View.

2) Kami secara aktif berupaya memperbaiki ini di sisi Paket Ionic dan ini adalah prioritas #1 kami, ini sedikit lebih terlibat daripada biasanya karena kami secara bersamaan menambahkan fitur baru sehingga kami tidak merusak proyek lama dengan memperbaiki serangga:

3) Saat perbaikan untuk Paket Ionic datang, Anda akan dapat memilih XCode 8 atau XCode 9 sehingga Anda memiliki kendali penuh atas apa yang kami gunakan untuk membangun aplikasi Anda. Kami akan terus mengembangkan pustaka penyiapan dan versi yang tersedia dari waktu ke waktu.

Kami berharap untuk rilis segera, terima kasih atas pengertiannya!

Terima kasih,
Matt

PS Saya tahu lebih banyak tentang sisi Pro daripada sisi kerangka kerja lokal, jika ada masalah membangun LOKAL (tidak menggunakan Paket), saya sarankan memutakhirkan ke XCode 9.

Terima kasih @matthewkremer - Saya dapat mengonfirmasi bahwa pembaruan dari xCode 8.3.3 ke 9 memecahkan masalah saya di mana bantalan bilah status tidak diterapkan ketika aplikasi dibuat secara lokal untuk iPhone 6 yang menjalankan iOS 11.2.

Ini harus diperhatikan untuk semua pelanggan Pro sekarang.

Masalah ini masih berlanjut menggunakan Ionic Native terbaru (4.5.2) dan skrip aplikasi terbaru (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 Anda harus membangun menggunakan Xcode 9 (mungkin itu harus didokumentasikan di suatu tempat di luar masalah ini)

sayangnya, saya tidak dapat membangun aplikasi saya dengan xcode 9 karena iMac saya terlalu tua dan saya tidak dapat memperbaruinya ke sierra. tanpa sierra no xcode 9 :-(

@nicolasborn Dalam hal ini, Anda dapat menggunakan layanan build Ionic Pro untuk membangun secara online. Atau gunakan solusi ini: https://github.com/ionic-team/ionic/issues/13294#issuecomment -341067770

@marcovtwout : Ionic Pro terlalu mahal untuk ini. Ini adalah proyek pribadi yang tidak dibayar. Saya menggunakan solusinya dan berharap ini juga berfungsi untuk iPhone x.

@marcovtwout Masalahnya "diperbaiki" saat menggunakan Xcode 9.

Namun sejumlah pengguna (termasuk saya) belum dapat pindah ke Xcode 9, baik karena pembatasan OS/Perangkat Keras atau hanya karena kompilasi dengan Xcode 9 menimbulkan banyak masalah baru (misalnya tentang penandatanganan otomatis, pesan push.. .). Oleh karena itu kami sangat menghargai jika Xcode 8.x masih didukung.

Ini mungkin tampak seperti masalah CSS/tata letak kecil, tetapi itu membuat kehidupan pengembangan jauh lebih sulit bagi beberapa dari kita.

Masih ada ruang ekstra di header @ ios 10.3 hardware (iphone 5s, iphone7plus),
tetapi tidak ada ruang ekstra di emulator iphone.

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

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

paket global:

cordova (Cordova CLI) : 7.1.0

paket lokal:

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

Sistem:

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

@sonicwong tolong buka masalah baru dengan contoh aplikasi yang diunggah ke github.

Saya menghabiskan sepanjang sore men-debug untuk bilah status dan menemukan bahwa saya tidak menghapus komentar pada baris berikut di index.html.

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

Saya mengembangkan PWA pada awalnya dengan ionic. Saya mulai memigrasi PWA saya ke aplikasi kemudian menghadapi masalah ini.

Masih mengalami masalah ini, tetapi yang menarik, ketika saya memfokuskan input, tampaknya memperbaiki sendiri. Apakah ada orang lain yang melihat ini?

Pada titik ini saya tidak yakin harus mencoba apa. Saya telah menambahkan tag viewport, mencoba versi JS dan konfigurasi StatusBarOverlaysWebView, dan bahkan mengonfigurasi ulang seluruh proyek saya dari awal. Ada ide?

Masih dengan masalah ini juga. Saya sudah mencoba menambahkan this.statusBar.overlaysWebView(false); dan juga di config.xml , saya memiliki content="viewport-fit=cover dan saya memperbarui Xcode saya ke Version 9.3 (9E145)

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

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

paket global:

cordova (Cordova CLI) : 8.0.0

paket lokal:

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

Sistem:

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

Plugin:

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"

Saya menemukan bahwa ada kesalahan ukuran ketika di perangkat keras iOS dengan os10.3. Semuanya berjalan dengan benar setelah memutakhirkan os ke 11.x. (tidak ada kesalahan dalam simulator)

Adakah berita tentang memperbaikinya untuk xcode 8?

@mhartington akhirnya saya mereproduksi masalah ini, itu terjadi ketika Anda membuka halaman baru di modal, silakan periksa ini https://github.com/ionic-team/ionic/issues/14401

Saya juga pernah mengalami masalah ini. Bagi saya, ketika saya menjalankan ionic cordova run ios itu bekerja dengan sempurna, namun, ketika menggunakan dengan XCode 9 saya mengalami tumpang tindih.

Saya menemukan bahwa dalam proyek saya, saya telah memeriksa pengaturan "memerlukan layar penuh". Lihat gambar.

Setelah menghapus centang pengaturan ini dan membuat build lain dengan XCode, masalahnya telah diperbaiki. Semoga ini membantu.

artikel ini semoga bermanfaat
https://ayogo.com/blog/ios11-viewport/

Saya juga mengalami masalah ini dan setelah menerapkan statusBar.overlaysWebView(false); masalah telah diperbaiki.

Terima kasih untuk masalah ini! Masalah ini sedang dikunci untuk mencegah komentar yang tidak relevan dengan masalah asli. Jika ini masih menjadi masalah dengan versi terbaru Ionic, harap buat masalah baru dan pastikan template terisi penuh.