Users using Safari on iOS on my site experience no issues, if they've manually navigated to the site using Safari.
If, however, someone has sent them a link and they've clicked it, the pseudo browser that opens up (what is the proper name for this please - is it WKWebView?) breaks the site. Most things work fine, but if my site throws up a confirm() dialogue, nothing happens - it doesn't pop up, and the user gets no feedback that anything has gone wrong, other than their expected action didn't occur.
I'm unclear if the pseudo-browser is unable to show it, or is "displaying" it erroneously outside of the viewport somewhere.
Both in native Safari and in the in-app Safari I get a loading animation of 5 dots/bars moving left to right next to the wifi symbol at the top of the phone. In Safari that goes when I close the confirm, in pseudo Safari there's no confirm to close, and that animation is perpetual.
How should I fix this?
When searching for the issue I find plenty of advice for people making iOS apps telling them how to allow confirm()`alert()\prompt()in their in-app browser, but I can't find any Q&A aimed at webmasters like myself, on how to address the fact that our sites don't work in these browsers. Is the only option to get rid of theconfirm()` and generate an html/css popup of my own making?
Thank you.
function confirm(question) {
return new Promise(r => {
const behind = document.createElement("div");
behind.style = `
position:fixed;
width:100vw;
height:100vh;
background: rgba(0,0,0,0.6);
left:0;
top:0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
`
document.body.append(behind)
const container = document.createElement("div");
container.style = `
height: 80%;
display: flex;
flex-direction: column;
justify-content: space-around;
`
const q = document.createElement("span");
q.style = `
color:white;
font-size:5em;
`
q.innerText = question;
container.append(q)
const ync = document.createElement("div"); //yes no container
ync.style =
`
align-items: center;
justify-content: center;
display:flex;
`
var btn = document.createElement("span");
btn.innerText = "Yes";
btn.style = `
cursor:pointer;
color:white;
background:#2ebf91;
text-align:center;
padding:8% 30%;
font-size:5em;
`
btn.onclick = function() {
r(true);
behind.remove();
}
ync.append(btn)
btn = btn.cloneNode();
btn.onclick = function() {
r(false);
behind.remove();
}
btn.style.background = "#ec2F4B"
btn.innerText = "No";
btn.style.marginLeft = "20%"
ync.append(btn)
container.append(ync)
behind.append(container)
})
}
You can change CSS or include it in style / html, I'm not an expert at CSS.
So maybe bad design.
console.log(await confirm("test")); // wait until click button