Take a look ! All my input boxes is now in this way after the update for IOS11. The cursor appear above the box.
Any suggestions ?
3 Likes
Where the screenshot comes from, real device or Xcode simulator? which device? (just tested my app with Xcode simulator “iPhone7” and it looks good)
How does your code look like?
If you empty your custom css, does this happens too?
It’s my real device running. I will not clean my css because this thing happens in many and many screens. Sometimes it’s works. But before IOS11, was working perfectly.
Ok then wait and see if someone else report it too…or maybe try to build a minimal app to see if you face the same problem, if so, you could then open an issue
Also, have you try the ionic-angular nightly? maybe the Ionic team included some fix (if it’s an issue)?
I updated my ionic cli after created this post and now this was partially fixed. It’s just happen when it’s have keyboard assist involved. This is the screen before the today’s update: basically you enter on the screen and this starts misaligned. Now, it’s looks ok, but if I force a situation to invoke the scroll of the keyboard assist, this misaligned again.
already better 
like I said before maybe ionic-angular@nightly? also did you use the last wkwebview?
just some ideas no clue if these are the reason or not…
I get this as well. Perfectly fine in the web browser during dev, but fails on an iPhone 7 plus running IOS 11.0. Works fine deployed to a 6 Plus on 10.1.1m and a 5s on 10.3.2.
The simulators also have the same issue.
Related, I have an issue aligning icons/text within an “item”, which again only affects IOS11. There must be some slight difference between Safari in IOS 11.
1 Like
Ok, I had added “viewport-fit=cover” to my meta viewport in index.html to support iPhone X. When I remove this, my fields align correctly again, but I get teh vertical letter boxing in the iphone X emulator.
I’ve got “viewport-fit=cover” in my index.html too … when you upgraded to be iPhone X compatible you followed all the steps? https://blog.ionic.io/ios-11-checklist/
I didn’t use the nightly version; I want to get a release out in the next week or so, so am avoiding the dev versions. I did try the statusbar one, but that caused other issues, so I guess I will need the nightly and the wkwebview.
I think I will get this pre-X version out and then go through the rest of the Xify process ready for Nov 3rd.
You could maybe just give a try to the ionic-angular nightly version (installing, building, testing should take 15min max I guess), just to have a look…
Not sure about the plan of Ionic but I guess they are working on the iPhone X stuffs, so I hope to see a minor version about that soon (but only my guess,)
The statusbar could confirm it works, but don’t know what error you were facing.
But sure maybe if you are on a rush to finish and release, probably good to do a pre-X version…not everyone gonna use iOS11 and iPhone X next week I guess
On the other side, I think that WkWebView is important, I would advice you to check that you use the right one, already before your pre-X
Like I said, I couldnt reproduce the problem with my app on the simulator but I plan to upgrade my only phone to iOS 11 and test on a real device too, gonna let you know
I updated my iPhone 6 to iOS 11 and could confirm that I definitely not face this problem with my app
If that could help, I did all the steps described in https://blog.ionic.io/ios-11-checklist/ and here are my infos:
cli packages:
@ionic/cli-utils : 1.12.0
ionic (Ionic CLI) : 3.12.0
global packages:
cordova (Cordova CLI) : 7.0.1
Gulp CLI : CLI version 3.9.1 Local version 3.9.1
local packages:
@ionic/app-scripts : 2.1.4
Cordova Platforms : android 6.2.3 ios 4.5.0
Ionic Framework : ionic-angular 3.6.1-201709221952
System:
Android SDK Tools : 26.1.1
ios-deploy : 1.9.2
ios-sim : 5.0.13
Node : v8.5.0
npm : 5.3.0
OS : macOS Sierra
Xcode : Xcode 9.0 Build version 9A235
Misc:
backend : legacySame problem here.
With a simulator iPhone 8 Plus (IOS11).
@ionic/cli-utils : 1.12.0
ionic (Ionic CLI) : 3.12.0
global packages:
cordova (Cordova CLI) : 6.5.0
local packages:
@ionic/app-scripts : 2.1.3
Cordova Platforms : android 6.1.2 ios 4.3.1
Ionic Framework : ionic-angular 3.6.0
System:
ios-deploy : 1.9.0
ios-sim : 5.0.8
Node : v6.11.3
npm : 4.6.1
OS : macOS Sierra
Xcode : Xcode 9.0 Build version 9A235
Misc:
backend : legacy
@Teazy you didn’t follow all the steps of iOS 11 Checklist - Ionic Blog
at least your ionic-angular version isn’t the nightly one
@reedrichards Working perfectly : adding WKWebview engine + update ionic-angular. Thank you !
1 Like
Yeah !!! Now it works fine !!!
Just followed the steps of the checklist and…voilá !
1 Like
Praise little baby jesus and ya’ll for your comments. I had missed anything on the updates, and ran into the same issue when update to iOS 11. Ya’ll saved me a fair amount of head scratching… Many thanks to all who posted.
2 Likes
Is mandatory to solve the problem install WKWebview engine?
Some news about this?
1 Like
I installed WKWebView and all of a sudden nothing related do HTTP works anymore…
I even updated to 3.8.0 to see if it got fixed, but it didn’t.