I thought I had a foolproof method for detecting the notch on iPhones, but it turns out there are some flaws. Occasionally, when my app starts up, the function incorrectly reports that the phone does not have a notch when it actually does.
During the deviceReady() state of my app, I check for the presence of the notch and assign the true/false value to a variable for later use. However, around 1 out of every 5 times, it returns false. I suspect that this may be due to a timing issue where the function is evaluating the DOM before it has fully loaded, causing the detection method to fail.
function hasNotch() {
if (CSS.supports('padding-bottom: env(safe-area-inset-bottom)')) {
var div = document.createElement('div');
div.style.paddingBottom = 'env(safe-area-inset-bottom)';
document.body.appendChild(div);
setTimeout(function() {
var calculatedPadding = parseInt(window.getComputedStyle(div).paddingBottom, 10);
document.body.removeChild(div);
if (calculatedPadding > 0) {
errMgmt("preIndex/hasNotch ",101.1,"READY: Notch Detected") ;
return true ;
} else {
errMgmt("preIndex/hasNotch ",101.2,"READY: Notch Not Detected") ;
return false ;
}
},100) ;
} else {
errMgmt("preIndex/hasNotch ",101.3,"READY: Notch Not Supported") ;
return false ;
}
}
$ionicPlatform.ready(function() {
$rootScope.hasNotch = hasNotch() ;
...
}) ;
In the controller of my landing page:
.controller('HomeCtrl', function($rootScope,$scope,$state,$stateParams,$ionicModal,$q,apiService) {
if ($rootScope.hasNotch == true) {
// do CSS stuff
}
}) ;
When the detection fails, it always returns the message "READY: Notch Not Detected," never "READY: Notch Not Supported." This indicates that the CSS support works, but the issue lies with the calculation of padding.
The true/false value is crucial in the Controller of the landing page, and failure to detect it causes CSS layout problems. It seems like either the hasNotch() function is too slow and the landing page initializes before getting the response, or there might be an underlying issue with the function itself.
Additionally, I have looked into various methods to detect the notch on Android phones, but the available plugins seem to have issues or lack support. I am still searching for a reliable solution for Android devices, or even better, a universal solution that works for both iOS variations as well.