I am facing an issue where the text on my website renders normally on Android or Windows, but when I run it on iOS, the text disappears completely. It's as if all the text has been set to display: none; The other elements seem to be tucking in just fine.
not working on iOS
working on Android
Below is the HTML code:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link id="normalStylesheet" rel="stylesheet" href="style.css">
<link href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ddbcb2ae9deff3eef3ec">[email protected]</a>/dist/aos.css" rel="stylesheet">
<title>Tungstun Design and ICT</title>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&display=swap" rel="stylesheet">
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7b1a14083b495548554a">[email protected]</a>/dist/aos.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div class="main_section">
<div class="header"
data-aos="header-scroll"
data-aos-offset="100"
data-aos-duration="300"
data-aos-once="false"
data-aos-anchorPlacement="top-bottom"
data-aos-anchor=".work_content"
data-aos-easing="ease-in-out">
<ul id="header">
<li id="homeButton" class="headerItem"><a>Home</a></li>
<li id="workButton" class="headerItem"><a>Work</a></li>
<li id="contactButton" class="headerItem"><a>Contact</a></li>
</ul>
<img class="header_logo" src="images/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f09c9f979fb0c288de809e97">[email protected]</a>">
</div>
<div id="homeSection" class="logo_container">
<img class="logo" src="images/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a0cccfc7cfe092d88ed0cec7">[email protected]</a>">
</div>
<div class="buttons_container">
<button id="workMainButton" class="button primary_button">Work</button>
<button id="contactMainButton" class="button secondary_button">Contact</button>
</div>
<div class="image_div">
<img src="images/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e280858d94838e91a2d09acc928c85">[email protected]</a>" id="bgOvals">
</div>
<div class="circle_div"
data-aos="tagline-scroll"
data-aos-offset="100"
data-aos-duration="300"
data-aos-once="false"
data-aos-anchorPlacement="top-bottom"
data-aos-anchor=".work_content"
data-aos-easing="ease-in-out">
<img src="images/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d2b0b5b1bba0b1beb792e0aafca2bcb5">[email protected]</a>" id="bgCircle">
<h1 id="tagLine">A small IT and design company based in Utrecht</h1>
</div>
<div class="bottom_stroke"><hr><hr><hr></div>
</div>
<div id="workSection" class="work_content">
<h1 class="title">My work</h1>
<ul id="workList" class="work_list">
<li>
<div class="work_li_div">
<img src="images/amblogo.png" class="work_image">
<div class="work_name_div">Alles met boeken</div>
</div>
</li>
<li>
<div class="work_li_div">
<img src="images/Herfst.png" class="work_image">
<div class="work_name_div">VanGister</div>
</div>
</li>
<li>
<div class="work_li_div">
<img src="images/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c2aeada5adefb6b0a3acb1b2a3b0a7acb682f0baecb2aca5">[email protected]</a>" class="work_image">
<div class="work_name_div">Heimstel</div>
</div>
</li>
</ul>
<div class="bottom_stroke"><hr><hr><hr></div>
</div>
<div id="contactSection" class="contact_content">
<h1 class="title">Contact me</h1>
<h2>Let's make something great together!</h2>
<div class="form_div">
<form>
<label for="formName">Your name</label><br>
<input id="formName" type="text"><br>
<label for="formEmail">Your e-mail</label><br>
<input id="formEmail" type="email"><br>
<label for="formType">What can I do for you?</label><br>
<select id="formType"></select><br>
<form action="formMessage">Anything to add?</form>
<textarea id="formMessage" type="text"></textarea><br>
<button id="formConfirmButton" type="button">Shoot!</button>
</form>
</div>
<div class="bottom_stroke"><hr><hr><hr></div>
</div>
<script src="work.js" type="text/javascript"></script>
<script>
AOS.init();
</script>
</body>
</html>
Here is the CSS used:
@font-face {
font-family: gotham_medium;
src: url(font/GothamMedium.svg);
src: url(font/GothamMedium.ttf);
}
@font-face {
font-family: gotham_book;
src: url(font/GothamBook.svg);
src: url(font/GothamBook.ttf);
}
html, body {
background-color: var(--tungstun-background);
margin: 0px;
font-family: 'gotham_medium', 'Open Sans', sans-serif;;
text-rendering: optimizeLegibility;
}