Skip to content

Commit 296fac9

Browse files
committed
revert(ios): revert to none overlaying toolbar and address bar
- When using an iFrame in the in-app browser, there can be scrolling issues when the toolbar and address bar overlays the webview. It's more safe to return to the old behaviour, when nothing overlays the webview.
1 parent 7ba2062 commit 296fac9

File tree

1 file changed

+53
-97
lines changed

1 file changed

+53
-97
lines changed

src/ios/CDVWKInAppBrowser.m

Lines changed: 53 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -874,28 +874,35 @@ - (void)createViews
874874
[self.toolbarBackground.trailingAnchor constraintEqualToAnchor:self.view.trailingAnchor]
875875
]];
876876

877-
// Constrain Toolbar inside Toolbar background view with padding
877+
// Constrain Toolbar inside Toolbar background view with margin
878878
[NSLayoutConstraint activateConstraints:@[
879-
[self.toolbar.leadingAnchor constraintEqualToAnchor:self.toolbarBackground.leadingAnchor constant:10.0],
880-
[self.toolbar.trailingAnchor constraintEqualToAnchor:self.toolbarBackground.trailingAnchor constant:-10.0]
879+
[self.toolbar.topAnchor constraintEqualToAnchor:self.toolbarBackground.safeAreaLayoutGuide.topAnchor
880+
constant:MARGIN],
881+
[self.toolbar.bottomAnchor constraintEqualToAnchor:self.toolbarBackground.safeAreaLayoutGuide.bottomAnchor
882+
constant:MARGIN*-1],
883+
[self.toolbar.leadingAnchor constraintEqualToAnchor:self.toolbarBackground.leadingAnchor constant:MARGIN],
884+
[self.toolbar.trailingAnchor constraintEqualToAnchor:self.toolbarBackground.trailingAnchor constant:MARGIN*-1]
881885
]];
882886

883887
// Address background horizontal constraints with margin
884888
[NSLayoutConstraint activateConstraints:@[
885889
// Left to safe area for proper layout on landscape
886890
[self.addressBackgroundView.leadingAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.leadingAnchor
887-
constant:15.0],
891+
constant:MARGIN],
888892
// Right to safe area for proper layout on landscape
889893
[self.addressBackgroundView.trailingAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.trailingAnchor
890-
constant:-15.0]
894+
constant:MARGIN*-1]
891895
]];
892896

893897
// Constrain Address label inside Address background view with padding
894898
[NSLayoutConstraint activateConstraints:@[
895-
[self.addressLabel.topAnchor constraintEqualToAnchor:self.addressBackgroundView.topAnchor constant:10.0],
896-
[self.addressLabel.bottomAnchor constraintEqualToAnchor:self.addressBackgroundView.bottomAnchor constant:-10.0],
897-
[self.addressLabel.leadingAnchor constraintEqualToAnchor:self.addressBackgroundView.leadingAnchor constant:10.0],
898-
[self.addressLabel.trailingAnchor constraintEqualToAnchor:self.addressBackgroundView.trailingAnchor constant:-10.0]
899+
[self.addressLabel.topAnchor constraintEqualToAnchor:self.addressBackgroundView.topAnchor constant:MARGIN],
900+
[self.addressLabel.bottomAnchor constraintEqualToAnchor:self.addressBackgroundView.bottomAnchor
901+
constant:MARGIN*-1],
902+
[self.addressLabel.leadingAnchor constraintEqualToAnchor:self.addressBackgroundView.leadingAnchor
903+
constant:MARGIN],
904+
[self.addressLabel.trailingAnchor constraintEqualToAnchor:self.addressBackgroundView.trailingAnchor
905+
constant:MARGIN*.1]
899906
]];
900907

901908
// Define vertical constraints, in order from top to bottom
@@ -909,139 +916,87 @@ - (void)createViews
909916
[self.spinner.centerYAnchor constraintEqualToAnchor:self.webView.centerYAnchor].active = YES;
910917

911918
// Constraints for different cases set by options when Toolbar and/or Address label is visible or not
912-
// Constraint WebView fullscreen and overlay Toolbar and Address label on it
913-
// Webview top to top edge
914-
[self.webView.topAnchor constraintEqualToAnchor:self.view.topAnchor].active = YES;
915-
// WebView bottom to bottom edge
916-
[self.webView.bottomAnchor constraintEqualToAnchor:self.view.bottomAnchor].active = YES;
917-
918-
// Case 1: Toolbar visible, Address label not visible
919+
//
920+
// Case 1: Toolbar and Address label not visible
921+
if (!toolbarVisible && !addressLabelVisible) {
922+
// Webview top to top edge
923+
[self.webView.topAnchor constraintEqualToAnchor:self.view.topAnchor].active = YES;
924+
// WebView bottom to bottom edge
925+
[self.webView.bottomAnchor constraintEqualToAnchor:self.view.bottomAnchor].active = YES;
926+
}
927+
928+
// Case 2: Toolbar visible, Address label not visible
919929
if (toolbarVisible && !addressLabelVisible) {
920930
// Toolbar is at top
921931
if (toolbarIsAtTop) {
922932
[NSLayoutConstraint activateConstraints:@[
923933
// Toolbar background top to top edge
924934
[self.toolbarBackground.topAnchor constraintEqualToAnchor:self.view.topAnchor],
925-
// Toolbar background bottom to toolbar bottom with margin
926-
[self.toolbarBackground.bottomAnchor constraintEqualToAnchor:self.toolbar.bottomAnchor
927-
constant:MARGIN],
928-
// Toolbar top to background safe area top
929-
// For landscape add a margin to top, so it's not glued to the top
930-
// On portrait this only adds a subtle margin. To implement this clean, we would have to listen
931-
// to the orientation change and would have to change the constant in the constraint
932-
[self.toolbar.topAnchor constraintEqualToAnchor:self.toolbarBackground.safeAreaLayoutGuide.topAnchor
933-
constant:MARGIN]
935+
// Webview top to Toolbar background bottom
936+
[self.webView.topAnchor constraintEqualToAnchor:self.toolbarBackground.bottomAnchor],
937+
// WebView bottom to bottom edge
938+
[self.webView.bottomAnchor constraintEqualToAnchor:self.view.bottomAnchor]
934939
]];
935940
// Toolbar is at bottom (default)
936941
} else {
937942
[NSLayoutConstraint activateConstraints:@[
938-
// Toolbar background top to toolbar top with margin, margin must be negative here
939-
[self.toolbarBackground.topAnchor constraintEqualToAnchor:self.toolbar.topAnchor
940-
constant:MARGIN*-1],
943+
// WebView top to top edge
944+
[self.webView.topAnchor constraintEqualToAnchor:self.view.topAnchor],
945+
// WebView bottom to Toolbar background top
946+
[self.webView.bottomAnchor constraintEqualToAnchor:self.toolbarBackground.topAnchor],
941947
// Toolbar background bottom to bottom edge
942948
[self.toolbarBackground.bottomAnchor constraintEqualToAnchor:self.view.bottomAnchor],
943-
// Toolbar bottom to background safe area bottom
944-
[self.toolbar.bottomAnchor constraintEqualToAnchor:self.toolbarBackground.safeAreaLayoutGuide.bottomAnchor]
945949
]];
946950
}
947951
}
948952

949-
// Case 2: Toolbar not visible, Address label visible (default)
953+
// Case 3: Toolbar not visible, Address label visible
950954
if (!toolbarVisible && addressLabelVisible) {
951955
[NSLayoutConstraint activateConstraints:@[
956+
// Webview top to top edge
957+
[self.webView.topAnchor constraintEqualToAnchor:self.view.topAnchor],
958+
// WebView bottom to Address background top with margin
959+
[self.webView.bottomAnchor constraintEqualToAnchor:self.addressBackgroundView.topAnchor
960+
constant:MARGIN*-1],
952961
// Address background bottom to safe area bottom
953962
[self.addressBackgroundView.bottomAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.bottomAnchor]
954963
]];
955964
}
956965

957-
// Case 3: Toolbar visible and Address label visible
966+
// Case 4: Toolbar visible and Address label visible (default)
958967
if (toolbarVisible && addressLabelVisible) {
959968
// Toolbar is at top
960969
if (toolbarIsAtTop) {
961970
[NSLayoutConstraint activateConstraints:@[
962971
// Toolbar background top to top edge
963972
[self.toolbarBackground.topAnchor constraintEqualToAnchor:self.view.topAnchor],
964-
// Toolbar background bottom to Toolbar bottom with margin
965-
[self.toolbarBackground.bottomAnchor constraintEqualToAnchor:self.toolbar.bottomAnchor
966-
constant:MARGIN],
967-
// Toolbar top to backround safe area top
968-
// For landscape add margin to top, so it's not glued to the top
969-
// On portrait this only adds a subtle margin. To implement this clean, we would have to listen
970-
// to the orientation change and would have to change the constant in the constraint
971-
[self.toolbar.topAnchor constraintEqualToAnchor:self.toolbarBackground.safeAreaLayoutGuide.topAnchor
972-
constant:MARGIN],
973+
// Webview top to Toolbar background bottom
974+
[self.webView.topAnchor constraintEqualToAnchor:self.toolbarBackground.bottomAnchor],
975+
// Webview bottom to Address background top with margin
976+
[self.webView.bottomAnchor constraintEqualToAnchor:self.addressBackgroundView.topAnchor
977+
constant:MARGIN*-1],
973978
// Address background bottom to safe area bottom
974979
[self.addressBackgroundView.bottomAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.bottomAnchor]
975980
]];
976981

977982
// Toolbar is at bottom (default)
978983
} else {
979984
[NSLayoutConstraint activateConstraints:@[
980-
// Address background bottom to Toolbar Background top with margin, margin must be negative here
985+
// WebView top to top edge
986+
[self.webView.topAnchor constraintEqualToAnchor:self.view.topAnchor],
987+
// WebView bottom to Address background top with margin
988+
[self.webView.bottomAnchor constraintEqualToAnchor:self.addressBackgroundView.topAnchor
989+
constant:MARGIN*-1],
990+
// Address background bottom to Toolbar Background top with margin
981991
[self.addressBackgroundView.bottomAnchor constraintEqualToAnchor:self.toolbarBackground.topAnchor
982992
constant:MARGIN*-1],
983-
// Toolbar background top to Toolbar top with margin, margin must be negative here
984-
[self.toolbarBackground.topAnchor constraintEqualToAnchor:self.toolbar.topAnchor
985-
constant:MARGIN*-1],
986993
// Toolbar background bottom to bottom edge
987994
[self.toolbarBackground.bottomAnchor constraintEqualToAnchor:self.view.bottomAnchor],
988-
// Toolbar bottom to background safe area bottom
989-
[self.toolbar.bottomAnchor constraintEqualToAnchor:self.toolbarBackground.safeAreaLayoutGuide.bottomAnchor]
990995
]];
991996
}
992997
}
993998
}
994999

995-
- (void)viewDidLayoutSubviews
996-
{
997-
// Setting the WebView insets must be done after the sub views are layed out,
998-
// so their size are properly set and can be used for the inset calculation
999-
[self setWebViewInsets];
1000-
}
1001-
1002-
/**
1003-
Sets `contentInset` and `verticalScrollIndicatorInsets` of the WebView for the optional
1004-
overlayed Toolbar and Address Bar controlled by options, so the content can always be scrolled in the visible area.
1005-
*/
1006-
- (void)setWebViewInsets
1007-
{
1008-
// Toolbar and Address label are optional
1009-
BOOL toolbarVisible = _browserOptions.toolbar;
1010-
BOOL toolbarIsAtTop = [_browserOptions.toolbarposition isEqualToString:kInAppBrowserToolbarBarPositionTop];
1011-
BOOL addressLabelVisible = _browserOptions.location;
1012-
// Height and width of Toolbar and Address Background, which is needed to calculate the inset of the WebView
1013-
const CGFloat toolbarBackgroundHeight = self.toolbarBackground.bounds.size.height;
1014-
const CGFloat addressBackgroundHeight = self.addressBackgroundView.bounds.size.height;
1015-
// Insets for the WebView, which gets calcualted
1016-
CGFloat topInset = 0.0;
1017-
CGFloat bottomInset = 0.0;
1018-
1019-
if (toolbarVisible) {
1020-
// Toolbar is at top
1021-
if (toolbarIsAtTop) {
1022-
topInset = toolbarBackgroundHeight - self.view.safeAreaInsets.top;
1023-
1024-
// Toolbar is at bottom (default)
1025-
} else {
1026-
bottomInset = toolbarBackgroundHeight - self.view.safeAreaInsets.bottom;
1027-
}
1028-
}
1029-
1030-
if (addressLabelVisible) {
1031-
// The scroll inset should have a margin to the address bar
1032-
bottomInset += addressBackgroundHeight + MARGIN;
1033-
1034-
// Add the margin between address bar and toolbar if toolbar is at bottom and visible
1035-
if (toolbarVisible && !toolbarIsAtTop) {
1036-
bottomInset += MARGIN;
1037-
}
1038-
}
1039-
1040-
// Set insets to webview
1041-
self.webView.scrollView.contentInset = UIEdgeInsetsMake(topInset, 0, bottomInset, 0);
1042-
self.webView.scrollView.verticalScrollIndicatorInsets = UIEdgeInsetsMake(topInset, 0, bottomInset, 0);
1043-
}
1044-
10451000
- (void)setWebViewFrame:(CGRect)frame
10461001
{
10471002
NSLog(@"Setting the WebView's frame to %@", NSStringFromCGRect(frame));
@@ -1201,6 +1156,7 @@ - (void)webView:(WKWebView *)theWebView didFinishNavigation:(WKNavigation *)navi
12011156
self.addressLabel.text = self.currentURL.absoluteString;
12021157
self.backButton.enabled = theWebView.canGoBack;
12031158
self.forwardButton.enabled = theWebView.canGoForward;
1159+
theWebView.scrollView.contentInset = UIEdgeInsetsZero;
12041160
[self.spinner stopAnimating];
12051161
[self.navigationDelegate didFinishNavigation:theWebView];
12061162
}

0 commit comments

Comments
 (0)