Support for iPhone X

[theHellyar]

So with iOS 11 and iPhone X and this project not being updated for some time....what the likelihood of getting support for iPhone X?

Right now the plugin isn't getting the correct toolbar + status bar sizes and puts the browser under the toolbar by about 20 or so pixels on normal iPhone 5-8 and on iPhone X about 40px.

I am currently digging thru the CDVThemeableBrowser.m file to fix this myself but in my situations I can't run my product from xCode on a simulator and I don't own the device...so troubleshooting is not working...

[pougin]

Yes, found the same issue

[yanglongji]

any update? any fork project can use?

[procom]

+1

[torgnywalin]

+1

[anmaciel]

+1

[theHellyar]

My fix, place this in the 'loadstone' addEventListener:
if (isIOS) { browser.insertCSS({ code: "body {margin-top: 20px;} @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {body {margin-top: 44px;}}" }); }

so ever since iOS 11 and UKWebview I have been getting 20px in this browser so I have used insertCSS (for iOS only, platform.is('ios')) to remedy the 20px issue at the top.

With iPhone X that pixel count was different....so to target iPhone X with css (tried in the ObjectiveC code but it was inconsistent) so the media query for the iPhone X sized screen is:
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)
So I add a margin of 44px to the top to adjust for the 'notch' and the 20px from the UKWebView issue....

admittedly not the best solution thus I have not done a pull request cause this is a css fix but it works..at least in the simulator...getting an iPhone X today and can better test.

[procom]

Hello,

It doesn't work for me.
My code
const browser: ThemeableBrowserObject = this.themeableBrowser.create(url, '_blank', options);
browser.insertCss({ code: "body {margin-top: 20px;}" });
browser.show();

iPhone-6 Simulator - 11.2

[theHellyar]

@procom

Note the ' browser.insertCSS ' I read the 'Css' doesn't work even though it is documented that way. use 'CSS'

if that still doesn't help I am not sure if required but I am inserting the CSS in the loadstop event listener as below.

Full Code:
let browser = cordova.ThemeableBrowser.open(this.resource.loginResources.External_Link_Prefix + "/signup", this.appSetting.loadURL, this.appSetting.browserOpt).addEventListener('loadstop', function (event) { if (isIOS) { browser.insertCSS({ code: "body {margin-top: 20px;} @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {body {margin-top: 44px;}}" }); } browser.show(); });

[michal-th]

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

I created a PR #170 , but it seems there is nobody maintaining this repo anymore..

[procom]

Hello,

I come back to this topic.
Here is a global solution after several tests

- (void) rePositionViews {
    // Webview height is a bug that appear in the plugin for ios >= 11 so we need to keep the previous code that work great for previous versions
    if (@available(iOS 11, *)) {
        
        CGFloat toolbarHeight = [self getFloatFromDict:_browserOptions.toolbar withKey:kThemeableBrowserPropHeight withDefault:TOOLBAR_DEF_HEIGHT];
        CGFloat statusBarOffset = [self getStatusBarOffset];
        CGFloat webviewOffset = _browserOptions.fullscreen ? 0.0 : toolbarHeight + statusBarOffset;
        
        if ([_browserOptions.toolbarposition isEqualToString:kThemeableBrowserToolbarBarPositionTop]) {
            // The webview height calculated did not take the status bar into account. Thus we need to remove status bar height to the webview height.
            [self.webView setFrame:CGRectMake(self.webView.frame.origin.x, webviewOffset, self.webView.frame.size.width, (self.webView.frame.size.height-statusBarOffset))];
            [self.toolbar setFrame:CGRectMake(self.toolbar.frame.origin.x, [self getStatusBarOffset], self.toolbar.frame.size.width, self.toolbar.frame.size.height)];
        }
        // When positionning the iphone to landscape mode, status bar is hidden. The problem is that we set the webview height just before with removing the status bar height. We need to adjust the phenomen by adding the preview status bar height. We had to add manually 20 (pixel) because in landscape mode, the status bar height is equal to 0.
        if (statusBarOffset == 0) {
            [self.webView setFrame:CGRectMake(self.webView.frame.origin.x, webviewOffset, self.webView.frame.size.width, (self.webView.frame.size.height+20))];
        }
        
        CGFloat screenWidth = CGRectGetWidth(self.view.frame);
        NSInteger width = floorf(screenWidth - self.titleOffset * 2.0f);
        if (self.titleLabel) {
            self.titleLabel.frame = CGRectMake(floorf((screenWidth - width) / 2.0f), 0, width, toolbarHeight);
        }
        
        [self layoutButtons];
        
    } else {
        
        CGFloat toolbarHeight = [self getFloatFromDict:_browserOptions.toolbar withKey:kThemeableBrowserPropHeight withDefault:TOOLBAR_DEF_HEIGHT];
        CGFloat webviewOffset = _browserOptions.fullscreen ? 0.0 : toolbarHeight;
        
        if ([_browserOptions.toolbarposition isEqualToString:kThemeableBrowserToolbarBarPositionTop]) {
            [self.webView setFrame:CGRectMake(self.webView.frame.origin.x, webviewOffset, self.webView.frame.size.width, self.webView.frame.size.height)];
            [self.toolbar setFrame:CGRectMake(self.toolbar.frame.origin.x, [self getStatusBarOffset], self.toolbar.frame.size.width, self.toolbar.frame.size.height)];
        }
        
        CGFloat screenWidth = CGRectGetWidth(self.view.frame);
        NSInteger width = floorf(screenWidth - self.titleOffset * 2.0f);
        if (self.titleLabel) {
            self.titleLabel.frame = CGRectMake(floorf((screenWidth - width) / 2.0f), 0, width, toolbarHeight);
        }
        
        [self layoutButtons];
    }
}

[DirkBoer]

Hi @procom , thanks a lot! Your fix seems to help. How can we integrate this into this repository? I think the repository is abandoned. I'm thinking about creating a new one. I don't think I'm the perfect person to maintain a repository, but I'd like to contribute.