For my friend's birthday, I decided to surprise him by creating a web page for his online radio station. Being new to JavaScript, it was a great learning opportunity for me. After much experimenting, I finally got the page to work smoothly on desktop and mobile devices. However, my oversight in testing on iPhones led to a major issue when I presented the page to him yesterday!
To address this error, I created a free account on Browserstack to identify the errors occurring specifically on Safari. While I now know what is causing the problems, I'm stuck on how to fix them.
If you'd like to take a look at the page in question, here is the link:
The website in question
First, let's take a look at the code and then further down are the errors encountered:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> The Hatch Radio Station </title>
<link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
<style>
body {
margin: 0;
overflow: hidden;
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */
...
...
</html>