[MODERN] iOS - problems with positioning and toolbars

[maciej.zabielski]

Hi,

I have some issues with positioning and toolbars on iOS build. I was wondering if anyone had similar problems and is there any proven set of settings and tweaks that make that work?

1) on iOS device (other than iPhone X) a white gap is added on top, to accommodate for a built in toolbar. That is almost fine, but... this does not work when for example a form is being edited, and the view is moved up.
The content will cover the built in toolbar, and that should not happen.
iphone8.pngiphone8_2.png
What is even worse, the main viewport does not respect this offset, and as a result a bottom part is cut off. (Its like the height is adjusted without taking into account the gap for toolbar)
Is this something that should be addressed on Cordova or ExtJS level?




2) iPhone X (and other models with notch) - the white gap is added and it does not play well with iPhone X, as it has its own offset?
The gap is not needed and it creates the same main viewport "cut off" issue as above.
iphonex.jpg


These problems render the apps totally useless.


I have used the following settings so far:


For index.html

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">

For cordova config.xml

<preference name="DisallowOverscroll" value="true" />
<preference name="EnableViewportScale" value="false" />

There is also a pretty good post about these type of issues here:
https://stackoverflow.com/questions/...ne-x-simulator

Thanks for any tips
Maciej

[[email protected]]

me too, same error
Any fix?

[maciej.zabielski]

First of all, use the settings I have described in the initial post.

Second, you might wan to add extra margins in some way to Body on index.html
Use Safari web inspector to check what elements are affected.
None of them work perfect for me, but I didn't have time to investigate this further:

.x-ios-native:not(.x-phone.x-landscape){
 padding-top: 0px!important;
}

body{
  background: var(--alt-background-color);
}

.x-viewport:not(.x-phone.x-landscape){
  padding-bottom: env(safe-area-inset-bottom);
  padding-top: env(safe-area-inset-top);
}

I have added support ticket and there is an issue registered for that to fix "native" support on iOS with notch.

[andyo]

Sencha, any update on this??? I'm on version 6.7 and handling of the iPhone X* screen format is very lacking.

(Maciej, good tips by the way)

[mattia.pagliasso]

First of all, use the settings I have described in the initial post.

Second, you might wan to add extra margins in some way to Body on index.html
Use Safari web inspector to check what elements are affected.
None of them work perfect for me, but I didn't have time to investigate this further:

At the moment this is the only working solution.
Any plan from Sencha to support iPhone X, Xs and XR natively ? 

.x-ios-native:not(.x-phone.x-landscape){
 padding-top: 0px!important;
}

body{
  background: var(--alt-background-color);
}

.x-viewport:not(.x-phone.x-landscape){
  padding-bottom: env(safe-area-inset-bottom);
  padding-top: env(safe-area-inset-top);
}

I have added support ticket and there is an issue registered for that to fix "native" support on iOS with notch.

At the moment this is the only working solution.
Any ETA from Sencha to support iPhone X* family natively ?