JS not working properly on iOS devices - Only sometimes

Question

I have searched here for weeks now trying to find an answer. I haven't seen anything that duplicated my problem, but I have tried a few things anyway, either because they were close, or out of desperation. So, here I am asking specifically.

I have a members area on my site that offers the players a notepad to keep notes. It is a simple thing, just a PHP write to flat file that uses JS to show or hide the pop up.On every tested device, screen size, resolution, OS, etc.it works perfectly.

I have the same code and pop ups on the side bar in the gaming area. In all Linux and Windows OSes, browsers, mobile or desktop screens it works perfectly, yet, on iPhone, iPad and Mac computers with Safari, the pop ups are there (this is verified, the players can click the links, write and save notes, etc) but the pop ups don't appear. They are just... invisible.

I am not a JS expert, nor am I exceptional at PHP, but I feel I am simply missing something here that is stupid-obvious.

I hope someone can see what I am missing. Again, this code works as expected Page A, but Not Page B, even though it is the same code. The pop ups in iOS devices the boxes are there on Page B, just invisible.

 // Notepad PopUp var note = document.getElementById('myNote'); var btn = document.getElementById("noteBtn"); var span = document.getElementsByClassName("close")[0]; btn.onclick = function() { note.style.display = "block"; } span.onclick = function() { note.style.display = "none"; } // Help Links PopUp var links = document.getElementById('myLinks'); var btn = document.getElementById("linksBtn"); var span = document.getElementsByClassName("close2")[0]; btn.onclick = function() { links.style.display = "block"; } span.onclick = function() { links.style.display = "none"; } window.onclick = function(event) { if (event.target == links) { links.style.display = "none"; } }

 .note, .links, .donate { display: none; position: fixed; z-index: 1; padding-top: 40px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.8); } .note-content, .links-content, .donate-content { position: relative; background-color: #888; margin: auto; padding: 0; width: 25em; height: 30em; text-align: center; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); -webkit-animation-name: animatetop; -webkit-animation-duration: 0.4s; animation-name: animatetop; animation-duration: 0.4s } /* Don't forget the drop down animation */ @-webkit-keyframes animatetop { from {top:-300px; opacity:0} to {top:0; opacity:1} } @keyframes animatetop { from {top:-300px; opacity:0} to {top:0; opacity:1} } /* and the close buttons, if applicable */ .close, .close2, .close3 { color: #FFF; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus, .close2:hover, .close2:focus, .close3:hover, .close3:focus { color: #000; text-decoration: none; cursor: pointer; } /* Next we need the header, body, content and footers */ .note-header, .links-header, .donate-header { min-height: 4em; padding: 2px 16px; background-color: #999; color: #000; position: relative; } .note-header p, .links-header p, .donate-header p { color: #000; margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .note-body, .links-body, .donate-body { padding-top: 1em; } .note-body p, .donate-body p { padding-top: 1em; } .links-body p { padding-top: 1em; font-size: 1.25em; margin: 0.5em auto; } .links-body a:link, .links-body a:visited, .donate-body a:link, .donate-body a:visited { color: #2D5986; background: inherit; } .links-body a:hover, .donate-body a:hover { color: #0099CC; background: inherit; text-decoration: underline; } textarea { font-family: "Courier New", Georgia; } .info { font-size: 8pt; font-style: italic; }

 <div class="topbar"> <div class="topRight"> <ul> <li><button id="forumBtn" class="curs">Member Forum</button></li> <li><button id="memberBtn" class="curs">Member Portal</button></li> <li><button id="noteBtn" class="curs">Open Notepad</button></li> <li><button id="linksBtn" class="curs">Open Help Tools</button></li> <li><button id="donateBtn" class="curs">Donate </button></li> </ul> </div> <div id="myNote" class="note"> <div class="note-content"> <div class="note-header"> <span class="close">&times;</span> <p>Member's Notepad</p> </div> <div class="note-body"> <p><form action="/pge.php" method="POST" name="note"> <textarea name="note" rows="20" cols="40">Hi! I'm a notepad! </textarea> <input type="submit" name="submit" value="Save Note">&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" name="delNote" value="Delete Note" onclick="return confirm('Are you sure you want to do that?');"></form> </p> </div> </div> </div> <div id="myLinks" class="links"> <div class="links-content"> <div class="links-header"> <span class="close2">&times;</span> <p>Help Tools: Links and Resources</p> </div> <div class="links-body"> <p><a href="http://example.com/Tools/" target="_blank">Tools</a></p> <p><a href="http://example.com/tools/" target="_blank">more Tools</a></p> <p><a href="https://example.com/" target="_blank"> Converter</a></p> <p><a href="http://google.com/" target="_blank">Google Search</a></p> <p><a href="https://www.ecosia.org/" target="_blank">Ecosia Search</a></p> </div> </div> </div> <div id="myDon" class="donate"> <div class="donate-content"> <div class="donate-header"> <span class="close3">&times;</span> <p>Ways to Help CWoT 2</p> </div> <div class="donate-body"> <p><a target="_blank" href="https://example.com">Donate</a><br><span class="info">a $3 (USD) donation</span></p> </div> </div> </div> </div><script src="../scripts/notepad.js"></script>

Answer 1

1. NEVER call anything submit in a form. If you ever want to programatically submit it, the submit event handler is not available to you
2. You REDEFINE btn - it will be the second button always - this is a real error.
3. I strongly suggest using querySelector and addEventListener
4. The problem is likely a CSS issue on the page in question

Tested in Safari 13.0.5 (15608.5.11) on OSX 10.15.3 Catalina

Images

The code will look like this:

 // Notepad PopUp var note = document.getElementById('myNote'); var noteBtn = document.getElementById("noteBtn"); var closeNote = document.querySelector(".close"); noteBtn.addEventListener("click", function() { note.style.display = "block"; }); closeNote.addEventListener("click", function() { note.style.display = "none"; }); // Help Links PopUp var links = document.getElementById('myLinks'); var linksBtn = document.getElementById("linksBtn"); var closeLinks = document.querySelector(".close2"); linksBtn.addEventListener("click", function() { links.style.display = "block"; }); closeLinks.addEventListener("click", function() { links.style.display = "none"; }); window.addEventListener("click", function(event) { if (event.target == links) { links.style.display = "none"; } }); document.querySelector("[name=delNote]").addEventListener("click",function(e) { if (!confirm('Are you sure you want to do that?')) e.preventDefault(); })

 .note, .links, .donate { display: none; position: fixed; z-index: 1; padding-top: 40px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0.8); } .note-content, .links-content, .donate-content { position: relative; background-color: #888; margin: auto; padding: 0; width: 25em; height: 30em; text-align: center; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); -webkit-animation-name: animatetop; -webkit-animation-duration: 0.4s; animation-name: animatetop; animation-duration: 0.4s } /* Don't forget the drop down animation */ @-webkit-keyframes animatetop { from { top: -300px; opacity: 0 } to { top: 0; opacity: 1 } } @keyframes animatetop { from { top: -300px; opacity: 0 } to { top: 0; opacity: 1 } } /* and the close buttons, if applicable */ .close, .close2, .close3 { color: #FFF; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus, .close2:hover, .close2:focus, .close3:hover, .close3:focus { color: #000; text-decoration: none; cursor: pointer; } /* Next we need the header, body, content and footers */ .note-header, .links-header, .donate-header { min-height: 4em; padding: 2px 16px; background-color: #999; color: #000; position: relative; } .note-header p, .links-header p, .donate-header p { color: #000; margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .note-body, .links-body, .donate-body { padding-top: 1em; } .note-body p, .donate-body p { padding-top: 1em; } .links-body p { padding-top: 1em; font-size: 1.25em; margin: 0.5em auto; } .links-body a:link, .links-body a:visited, .donate-body a:link, .donate-body a:visited { color: #2D5986; background: inherit; } .links-body a:hover, .donate-body a:hover { color: #0099CC; background: inherit; text-decoration: underline; } textarea { font-family: "Courier New", Georgia; } .info { font-size: 8pt; font-style: italic; }

 <div class="topbar"> <div class="topRight"> <ul> <li><button id="forumBtn" class="curs">Member Forum</button></li> <li><button id="memberBtn" class="curs">Member Portal</button></li> <li><button id="noteBtn" class="curs">Open Notepad</button></li> <li><button id="linksBtn" class="curs">Open Help Tools</button></li> <li><button id="donateBtn" class="curs">Donate </button></li> </ul> </div> <div id="myNote" class="note"> <div class="note-content"> <div class="note-header"> <span class="close">&times;</span> <p>Member's Notepad</p> </div> <div class="note-body"> <p> <form action="/pge.php" method="POST" name="note"> <textarea name="note" rows="20" cols="40">Hi! I'm a notepad! </textarea> <input type="submit" name="subBut" value="Save Note">&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" name="delNote" value="Delete Note" /></form> </p> </div> </div> </div> <div id="myLinks" class="links"> <div class="links-content"> <div class="links-header"> <span class="close2">&times;</span> <p>Help Tools: Links and Resources</p> </div> <div class="links-body"> <p><a href="http://example.com/Tools/" target="_blank">Tools</a></p> <p><a href="http://example.com/tools/" target="_blank">more Tools</a></p> <p><a href="https://example.com/" target="_blank"> Converter</a></p> <p><a href="http://google.com/" target="_blank">Google Search</a></p> <p><a href="https://www.ecosia.org/" target="_blank">Ecosia Search</a></p> </div> </div> </div> <div id="myDon" class="donate"> <div class="donate-content"> <div class="donate-header"> <span class="close3">&times;</span> <p>Ways to Help CWoT 2</p> </div> <div class="donate-body"> <p><a target="_blank" href="https://example.com">Donate</a><br><span class="info">a $3 (USD) donation</span></p> </div> </div> </div> </div> <script src="../scripts/notepad.js"></script>