Search code examples
iosiphonecordovaionic3inappbrowser

Ionic plugin ThemeableBrowser offset issue on iPhone X

I am using ThemeableBrowser plugin

cordova-plugin-themeablebrowser 0.2.17 "ThemeableBrowser"

in my Ionic 3 project. In all of the devices it works fine, recently i tried to update the app to display correctly on iPhone X , by following the official ios11 checklist - https://blog.ionicframework.com/ios-11-checklist/

All the issues i had were resolved, apart from the ThemeableBrowser, which opens pages with an negative offset. I tried using insertCss method of themeable browser as suggested HERE , but this didn't work either.

This is initial state of the page when it opens:

Is there any other possible workaround?

Solution

  • I resolved this issue by editing CDVThemableBrowser.m - there is an obvious bug for all iOS devices, it's just more obvious on iPhone X as it has bigger status bar. The rePositionViews , which set the position of webview doesn't add the statusBar height to it's Y position

    I changed:

    - (void) rePositionViews {
  CGFloat toolbarHeight = [self getFloatFromDict:_browserOptions.toolbar withKey:kThemeableBrowserPropHeight withDefault:TOOLBAR_DEF_HEIGHT];
  CGFloat webviewOffset = _browserOptions.fullscreen ? 0.0 : toolbarHeight;`

    To:

    - (void) rePositionViews {
  CGFloat toolbarHeight = [self getFloatFromDict:_browserOptions.toolbar withKey:kThemeableBrowserPropHeight withDefault:TOOLBAR_DEF_HEIGHT];
  CGFloat statusBarOffset = [self getStatusBarOffset];
  CGFloat webviewOffset = _browserOptions.fullscreen ? 0.0 : toolbarHeight + statusBarOffset;`

    This solves the problem with the content offset