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/06 16:23:53 UTC
[GitHub] [cordova-ios] aubrey-fowler opened a new issue #964: iPhone X safe area has changed with iOS 13+
aubrey-fowler opened a new issue #964:
URL: https://github.com/apache/cordova-ios/issues/964
I'm writing an app with cordova, Ionic v1, and AngularJS 1.5.3.
```
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 adustments for the "safe area".
css
```
body {
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">`
It was working for me for a long time.
However, I noticed that with the iPhone X and XR with iOS 13.6 I'm having issues with the "safe area".
As I'm using cordova-ios 6.1.0 I'm using WkWebView only.
```
<platform name="ios">
<preference name="WKWebViewOnly" value="true" />
```
I'm finding that I have to multiply the safe-area-inset-bottom by 4 to make any progress.
```
$calculated_padding_bottom: calc(env(safe-area-inset-bottom) * 2);
body {
padding: env(safe-area-inset-top) env(safe-area-inset-right) $calculated_padding_bottom env(safe-area-inset-left);
}
```
What could be wrong?
----------------------------------------------------------------
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] alitalaee edited a comment on issue #964: iPhone X safe area has changed with iOS 13+
Posted by GitBox <gi...@apache.org>.
alitalaee edited a comment on issue #964:
URL: https://github.com/apache/cordova-ios/issues/964#issuecomment-918426782
I had the same issue and fixed after 4 hours
global.scss file
```
body {
margin-top: constant(safe-area-inset-top);
margin-top: env(safe-area-inset-top);
}
ion-tab-bar {
margin-bottom: calc(4px + env(safe-area-inset-top));
}
```
<img width="730" alt="Screen Shot 1400-06-22 at 22 16 01" src="https://user-images.githubusercontent.com/77755450/133131743-d329affb-4366-4492-b7f9-9145c6c740a2.png">
i did used safe-area-inset-top for margin-bottom to fixed this issue.
--
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] breautek commented on issue #964: iPhone X safe area has changed with iOS 13+
Posted by GitBox <gi...@apache.org>.
breautek commented on issue #964:
URL: https://github.com/apache/cordova-ios/issues/964#issuecomment-670037822
Does it specifically break in 13.6? (ie does it work in 13.5 simulator, but break in 13.6?)
If yes... then it sounds like an iOS introduced bug and I would suggest also reporting this issue to Apple.
----------------------------------------------------------------
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] aubrey-fowler commented on issue #964: iPhone X safe area has changed with iOS 13+
Posted by GitBox <gi...@apache.org>.
aubrey-fowler commented on issue #964:
URL: https://github.com/apache/cordova-ios/issues/964#issuecomment-670469638
@breautek How would I submit a bug with Apple?
I tested this on iOS 12 and I got the same problem. It's when I add attachments. So I have an ionic page and I add a list item it seems to push the "safe area" and footer button down. It's persistent as well even when I leave the page and come back there is a problem.
----------------------------------------------------------------
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] aubrey-fowler edited a comment on issue #964: iPhone X safe area has changed with iOS 13+
Posted by GitBox <gi...@apache.org>.
aubrey-fowler edited a comment on issue #964:
URL: https://github.com/apache/cordova-ios/issues/964#issuecomment-670479201
I added this code in my css file:
```
body {
padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
```
It seemed to help with part of the problem but not all of it.
Before and after.
However, the issue with the footer button being pushed down persists on iOS 13 even with iPhone 8 Plus and iPhone X.
----------------------------------------------------------------
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] alitalaee commented on issue #964: iPhone X safe area has changed with iOS 13+
Posted by GitBox <gi...@apache.org>.
alitalaee commented on issue #964:
URL: https://github.com/apache/cordova-ios/issues/964#issuecomment-918426782
I had the same issue and fixed after 4 hours
global.scss file
```
body {
margin-top: constant(safe-area-inset-top);
margin-top: env(safe-area-inset-top);
}
ion-tab-bar {
margin-bottom: calc(4px + env(safe-area-inset-top));
}
```
i did used safe-area-inset-top for margin-bottom to fixed this issue.
--
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] aubrey-fowler commented on issue #964: iPhone X safe area has changed with iOS 13+
Posted by GitBox <gi...@apache.org>.
aubrey-fowler commented on issue #964:
URL: https://github.com/apache/cordova-ios/issues/964#issuecomment-670479201
I added this code in my css file:
```
body {
padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
```
It seemed to help with part of the problem but not all of it.
Before and after.
However, the issue with the footer button being pushed down persists on iOS 13 even with iPhone 8 Plus and iPhone X.
----------------------------------------------------------------
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