You are viewing a plain text version of this content. The canonical link for it is here.
Posted to issues@cordova.apache.org by GitBox <gi...@apache.org> on 2020/08/07 14:21:09 UTC
[GitHub] [cordova-ios] aubrey-fowler opened a new issue #965: iOS 12 and 13 pushing footer buttons beyond safe area
aubrey-fowler opened a new issue #965:
URL: https://github.com/apache/cordova-ios/issues/965
I have an app written in Ionic v1, Cordova, and AngularJS 1.5.3.
The problem that I have does not occur on Android devices at all.
iPhones tested on: iPhone SE, iPhone 8, iPhone X, and iPhone XR.
For iOS 13.6 the problem occurs on: iPhone SE, iPhone 8, iPhone X, and iPhone XR.
iPhone X, and iPhone XR ( completely pushes the buttons out of view )
For iOS 12 the problem occurs on:
iPhone XR - somewhat occurs
iPhone 8 - does not occur
iPhone SE - does not occur
iPhone X - somewhat occurs
For iOS 11:
it does not occur on iPhone 8. There are no problems.
iPhone SE - no problems
It somewhat occurs on the iPhone X.
iPhone XR does not run iOS 11.
As the version of iOS increases, it seems to have more of an effect.
**What my code is doing**:
My page is for the user to enter an absence and they have the option of adding photo attachments.
The attachment is just going to be added as an ion-item in my ion-list.
I have an ionic view and a footer with a button in it. When I add an ionic item to my ionic list, it seems to push the footer button down out of the "safe area" and it does so permanently.
Even if I go to a different page and come back again the problem persists. It also seems to permanently affect the "safe area" on the different pages of my app.
**Problem**:
As the attachment list grows, it pushes the footer button down out of the safe area
**How can I keep my button in my footer in place on the latest versions of iOS?**
**Code snippet**:
<!-- absence -->
```
<ion-view left-buttons="leftButtons" cache-view="false" right-buttons="rightButtons">
<ion-nav-buttons side="right">
<button menu-toggle="right" class="button button-icon icon ion-home" ui-sref="main.home"
automation-id="RIGHT_NAV_HOME_BUTTON">
</button>
</ion-nav-buttons>
<ion-content class="has-header has-footer bg-stable" padding="false">
<ion-list can-swipe="true">
<div class="item title-bar">
<h2 class="dark" ng-i18next="BOOK_ABSENCE"></h2>
</div>
<div class="item item-icon-left" ng-click="setDate('startDate')">
<i class="icon ion-ios-calendar-outline"></i>
<span ng-i18next="START_DATE"></span>
<span class="item-note">{{ data.startDate | dateFormat }}</span>
</div>
<div class="item item-icon-left" ng-click="setDate('endDate')">
<i class="icon ion-ios-calendar"></i>
<span ng-i18next="END_DATE"></span>
<span class="item-note">{{ data.endDate | dateFormat }}</span>
<i class="icon ion-ios-arrow-right"></i>
</div>
<div class="item item-divider"></div>
<label class="item item-input">
<textarea placeholder="Comments" ng-model="data.comments" rows="4"></textarea>
</label>
<div class="item item-divider"></div>
<ion-item class="flex-container-center" ng-repeat="attachment in attachments">
<div class="flex-item-1">
<img ng-src="data:{{ attachment.mediaTypeField }};base64,{{ attachment.imageDataField }}">
</div>
<div class="flex-item-big">
<div>{{ attachment.filename }}</div>
</div>
</ion-item>
</ion-list>
</ion-content>
<div class="bar bar-footer no-padding bg-bottom">
<div class="button-bar">
<button class="button button-positive" ng-click="book()">
<span ng-i18next="SAVE"></span>
</button>
</div>
</div>
</ion-view>
```
**Environment:**
```
ionic info
Ionic:
ionic (Ionic CLI) : 4.10.3 (C:\Users\User\node_modules\ionic)
Ionic Framework : ionic1 1.3.5
@ionic/v1-toolkit : 1.0.22
Cordova:
cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : android 8.1.0, ios 6.1.0, browser 5.0.4, windows 4.4.3
Cordova Plugins : cordova-plugin-ionic-webview 4.1.3, (and 17 other plugins)
System:
Android SDK Tools : 26.1.1 (C:\Users\User\Documents\Android\sdk)
NodeJS : v10.21.0 (C:\Program Files\nodejs\node.exe)
npm : 6.14.4
OS : Windows 10
```
In the past, the new iPhone X came out and I added some code to make adjustments for the "safe area".
**css**
```
body {
padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left); //iOS 11.2
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
```
**html**
`<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">`
As I'm using cordova-ios 6.1.0 I'm using WkWebView only.
```
<platform name="ios">
<preference name="WKWebViewOnly" value="true" />
```
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org
[GitHub] [cordova-ios] ARMistice commented on issue #965: iOS 12 and 13 pushing footer buttons beyond safe area
Posted by GitBox <gi...@apache.org>.
ARMistice commented on issue #965:
URL: https://github.com/apache/cordova-ios/issues/965#issuecomment-671799895
Don't exactly know if it is the case here. But I had a similiar issue with iPhone 11 Max, which always displayed a white Border in the bottom. (Sorry no Screenshot) I always thought it has to do with the "home button" or status bar.
At least as really nothing worked I changed the Code for: CordovaLib/Classes/Private/Plugins/CDVWebViewEngine/CDVWebViewEngine.m
at line 399:
`
if (![@"fast" isEqualToString:decelerationSetting]) {
[wkWebView.scrollView setDecelerationRate:UIScrollViewDecelerationRateNormal];
} else {
[wkWebView.scrollView setDecelerationRate:UIScrollViewDecelerationRateFast];
}
wkWebView.allowsBackForwardNavigationGestures = [settings cordovaBoolSettingForKey:@"AllowBackForwardNavigationGestures" defaultValue:NO];
wkWebView.allowsLinkPreview = [settings cordovaBoolSettingForKey:@"Allow3DTouchLinkPreview" defaultValue:YES];
// Added this here
if (@available(iOS 11.0, *)) {
[self.webView.scrollView setContentInsetAdjustmentBehavior:UIScrollViewContentInsetAdjustmentNever];
}
`
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org
[GitHub] [cordova-ios] dpogue commented on issue #965: iOS 12 and 13 pushing footer buttons beyond safe area
Posted by GitBox <gi...@apache.org>.
dpogue commented on issue #965:
URL: https://github.com/apache/cordova-ios/issues/965#issuecomment-834440035
@ARMistice We have said **many times**, we will not set `UIScrollViewContentInsetAdjustmentNever` because it removes control from the app author. Every app should define their content inset behaviour with the `viewport-fit` meta tag, it is not up to Cordova to make that decision.
The solution to content not filling the screen after adding the meta tag, is to use `height: 100vh` instead of `height: 100%`.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org
[GitHub] [cordova-ios] MarcelSchuermann commented on issue #965: iOS 12 and 13 pushing footer buttons beyond safe area
Posted by GitBox <gi...@apache.org>.
MarcelSchuermann commented on issue #965:
URL: https://github.com/apache/cordova-ios/issues/965#issuecomment-834188808
Okey, great. Thanks for your feedback and solution!
I will test it in my case and give some feedback later.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org
[GitHub] [cordova-ios] ARMistice commented on issue #965: iOS 12 and 13 pushing footer buttons beyond safe area
Posted by GitBox <gi...@apache.org>.
ARMistice commented on issue #965:
URL: https://github.com/apache/cordova-ios/issues/965#issuecomment-834177362
No side effects. It works well for over half a year in my app. Don't know if it is already in the main branch, as I don't see any reason why it shouldn't be there.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org
[GitHub] [cordova-ios] regnete commented on issue #965: iOS 12 and 13 pushing footer buttons beyond safe area
Posted by GitBox <gi...@apache.org>.
regnete commented on issue #965:
URL: https://github.com/apache/cordova-ios/issues/965#issuecomment-1017265047
I added the fix directly to my `www/index.html`. That worked for me.
```html
<!DOCTYPE html>
<html style="height: 100vh">
...
</html>
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org
[GitHub] [cordova-ios] MarcelSchuermann commented on issue #965: iOS 12 and 13 pushing footer buttons beyond safe area
Posted by GitBox <gi...@apache.org>.
MarcelSchuermann commented on issue #965:
URL: https://github.com/apache/cordova-ios/issues/965#issuecomment-836848900
In my case it I needed to change my css classes. The padding-bottom resulted in the nav going below the border.
Unfortunately I only noticed this in iOS version on some devices / iOS-Versions.
Anyways, thanks for the feedback.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org
[GitHub] [cordova-ios] ARMistice edited a comment on issue #965: iOS 12 and 13 pushing footer buttons beyond safe area
Posted by GitBox <gi...@apache.org>.
ARMistice edited a comment on issue #965:
URL: https://github.com/apache/cordova-ios/issues/965#issuecomment-671799895
Don't exactly know if it is the case here. But I had a similiar issue with iPhone 11 Max, which always displayed a white Border in the bottom. (Sorry no Screenshot) I always thought it has to do with the "home button" or status bar.
At least as really nothing worked I changed the Code for: CordovaLib/Classes/Private/Plugins/CDVWebViewEngine/CDVWebViewEngine.m
at line 399:
```
if (![@"fast" isEqualToString:decelerationSetting]) {
[wkWebView.scrollView setDecelerationRate:UIScrollViewDecelerationRateNormal];
} else {
[wkWebView.scrollView setDecelerationRate:UIScrollViewDecelerationRateFast];
}
wkWebView.allowsBackForwardNavigationGestures = [settings cordovaBoolSettingForKey:@"AllowBackForwardNavigationGestures" defaultValue:NO];
wkWebView.allowsLinkPreview = [settings cordovaBoolSettingForKey:@"Allow3DTouchLinkPreview" defaultValue:YES];
// Added this here
if (@available(iOS 11.0, *)) {
[self.webView.scrollView setContentInsetAdjustmentBehavior:UIScrollViewContentInsetAdjustmentNever];
}
```
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org
[GitHub] [cordova-ios] dpogue edited a comment on issue #965: iOS 12 and 13 pushing footer buttons beyond safe area
Posted by GitBox <gi...@apache.org>.
dpogue edited a comment on issue #965:
URL: https://github.com/apache/cordova-ios/issues/965#issuecomment-834440035
@ARMistice We have said many times, we **will not** set `UIScrollViewContentInsetAdjustmentNever` because it removes control from the app author. Every app should define their content inset behaviour with the `viewport-fit` meta tag, it is not up to Cordova to make that decision.
The solution to content not filling the screen after adding the meta tag, is to use `height: 100vh` instead of `height: 100%`.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org
[GitHub] [cordova-ios] regnete edited a comment on issue #965: iOS 12 and 13 pushing footer buttons beyond safe area
Posted by GitBox <gi...@apache.org>.
regnete edited a comment on issue #965:
URL: https://github.com/apache/cordova-ios/issues/965#issuecomment-1017265047
I added the fix directly to my `www/index.html`. That worked for me.
```html
<!DOCTYPE html>
<html style="height: 100vh; width: 100vw;">
...
</html>
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org
[GitHub] [cordova-ios] ARMistice commented on issue #965: iOS 12 and 13 pushing footer buttons beyond safe area
Posted by GitBox <gi...@apache.org>.
ARMistice commented on issue #965:
URL: https://github.com/apache/cordova-ios/issues/965#issuecomment-838128801
> @ARMistice We have said many times, we **will not** set `UIScrollViewContentInsetAdjustmentNever` because it removes control from the app author. Every app should define their content inset behaviour with the `viewport-fit` meta tag, it is not up to Cordova to make that decision.
>
> The solution to content not filling the screen after adding the meta tag, is to use `height: 100vh` instead of `height: 100%`.
@dpogue Many thanks for this hint, I am sorry if I missed these solution. In the time as it appears a few years ago, I couldn't solve it with a lot of tries using viewport-fit tag and layout changes using full screen display on xcode. But perhaps (I cannot remember anymore) I haven't tried the "height: 100vh;" solution. Should this go into the body style, if I want a complete full-screen experience in Android and iOS?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org
[GitHub] [cordova-ios] MarcelSchuermann commented on issue #965: iOS 12 and 13 pushing footer buttons beyond safe area
Posted by GitBox <gi...@apache.org>.
MarcelSchuermann commented on issue #965:
URL: https://github.com/apache/cordova-ios/issues/965#issuecomment-834156626
Hi everyone
I experience the same issue on some pages on iPhone 11 (iOS 14.5) after the first load of a page. If I load it again, it often disapears. In android there is no problem.
@aubrey-fowler : did you find any other solution?
@ARMistice : did you experience any sideeffects by adding your code?
Thanks for the contribution!
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org