Situation
Our Angular+Bootstrap app is functioning smoothly in Desktop on all operating systems, as well as Android and iPhone devices. There are no visible JavaScript errors or CSS warnings.
Dilemma
However, an issue arises intermittently while using the app on an iPad when tapping a <a href="#screen2". This action triggers a change in the routerProvider to switch to a different screen controller and template. It appears as though a transparent layer is obstructing the entire screen, resulting in all events such as clicks, taps, and scrolling being disabled.
Anomaly
Interestingly, if we switch the device's orientation to landscape mode, the screen becomes responsive again. However, upon reverting back to portrait mode, the screen locks up once more.
Additional Information
We do not have the ability to update the WkWebview to a newer version; our control is limited to the web app itself. We understand that WkWebview has numerous issues related to scrolling, focus, and display changes, which can lead to blank screens or freezing. To prevent blank screens during certain focus events, we are utilizing the following script:
(function(){
try{
var a=navigator.userAgent;
if((a.indexOf('Salesforce')!=-1)&&&(a.indexOf('iPhone')!=-1||a.indexOf('iPad')!=-1)&&&(a.indexOf('OS/8')!=-1||a.indexOf('OS 8')!=-1||a.indexOf('OS/9')!=-1||a.indexOf('OS 9')!=-1||a.indexOf('OS 10')!=-1||a.indexOf('OS/10')!=-1)&&&(a.indexOf('Safari')==-1)){
var s=document.createElement('style');
if(a.indexOf('OS/8')!=-1||a.indexOf('OS 8')!=-1) {
s.innerHTML="html,body{overflow: auto;-webkit-overflow-scrolling:touch;}body{position:absolute;left:0;right:0;top:0;bottom:0;}";
}
else if(a.indexOf('OS/9')!=-1||a.indexOf('OS 9')!=-1) {
s.innerHTML="html,body{overflow: auto;-webkit-overflow-scrolling:auto;}body{position:absolute;left:0;right:0;top:0;bottom:0;}";
}
else if(a.indexOf('OS/10')!=-1||a.indexOf('OS 10')!=-1) {
s.innerHTML="html,body{overflow: auto;-webkit-overflow-scrolling:auto;}body{position:absolute;left:0;right:0;top:0;bottom:0;}";
}
document.getElementsByTagName('head')[0].appendChild(s);
}
} catch(e){}
})();
Inquiry
Are there any potential workarounds available to resolve this frustrating issue?
Thanks for your assistance