Toast message not displayed in iOS 10
sumedh-plenarea opened this issue · comments
I am using this plugin in my Ionic app and recently, we have upgraded our device to iOS 10. Previously, everything was working fine and now after the upgrade, toast messages are displayed only at the time when I move the app from foreground to background or vice versa. Not sure about this behaviour but this is kinda weird.
Expected behaviour
Toast message should be displayed when Ionic app is in foreground and not at the time when it moves to background or vice versa.
Actual behaviour
Toast message displayed at the time where I put app to background or foreground.
I'm seeing this behaviour on
- iOS device
Hardware models
iPhone 6s plus
OS versions
iOS 10
I'm not a dummy, so I've checked these
- It happens on a fresh Cordova CLI project as well.
- I'm waiting for
deviceready
to fire. - My JavaScript has no errors (
window.onerror
catches nothing).
So how can we reproduce this?
Try to display the toast message on any event (eg. login) and check the above scenario.
For ios 10 simulators:
for your ionic project you can update your content security policy like below code
<meta http-equiv="Content-Security-Policy" content="img-src 'self' data: *; default-src gap://ready file://* *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
you need to add gap://ready file://* *;
in your default src
Just tried with the following code in index.html
: all fine. Copy it over your own to verify:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div class="app">
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
<button onclick="tap()">tap</button>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script>
function tap() {
window.plugins.toast.showWithOptions(
{
message: "hey there",
duration: "long",
position: "bottom",
styling: {
backgroundColor: '#66B2FF',
textColor: '#000000',
}
},
//Success callback
function(args) {
console.log('cordovaToast: ' + JSON.stringify(args));
if (args && args.event == "touch") {
alert("touched");
}
},
function(error) {
log('cordovaToast error: ', error);
}
);
}
</script>
</body>
</html>
excuse the lousy formatting..