iPhone X compatibility

[florianwalter]

After adding the appropriate splash screens to config.xml, the screen on the iPhone X is used completely.

But when i open the menu, it's missing:

When i then rotate the device to the right and back, the content jumps up and is then displayed under the notch.

This does not happen, when run on any other model, e.g. iPhone 8.

Is this only Framework7 dependent? Would upgrading to the latest version of Framework7 help here?

Thanks

[macdonst]

@florianwalter I believe this to be a bug because of the iPhone X screen resolution. We'll have to look into it. Sadly, I'll have to rely on the emulator as I don't have an iPhone X handy.

[florianwalter]

Some more infos:

• I updated Framework7 to 2.2.5 and cordova-ios to 4.5.4, no improvement.
• Running a Framework7-Example-App (https://framework7io.github.io/framework7-template-vue-simple/) directly in Safari (fullscreen, after adding to home screen), everything works as expected.
• I replaced some lines in node_modules/framework7/dist/css/framework7.css:

line 253:
html.device-ios.device-iphone-x .statusbar { height: constant(safe-area-inset-top); height: env(safe-area-inset-top); }
with:
html.device-ios.device-iphone-x .statusbar { height: 44px; }

line 268:
html.with-statusbar.device-iphone-x .framework7-root { padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top); }
with:
html.with-statusbar.device-iphone-x .framework7-root { padding-top: 44px; }

This fixes the problem with the statusbar positioning after a rotation has been done.

The fact, that Safari itself shows no problems and uses WKWebView internally and the PhoneGap/Cordova App uses UIWebView and shows the problem, leads me to the assumption, that this could be a bug with UIWebView and the safe-area-inset values. Maybe they are not reset after a rotation?!

If my wild speculations would be correct, this might only be fixable in Cordova?

[florianwalter]

Any progress here regarding the missing menu on iPhone X?

[KevinCarroll7737]

I am considering using this template. Is this problem fixed?