Currently, this website is designed to work exclusively for mobile devices. When viewed in Chrome's mobile view using the inspector, everything appears to be functioning correctly. However, when accessed through Safari or on an actual mobile phone, there seems to be a problem where it skips over the second section that it should snap to. Below is the relevant code snippet:
function startGreet(){
const greets = ["Hey","Hello","Good Morning"];
const p = document.getElementById('greeting');
p.innerHTML = greets[Math.floor(Math.random() * greets.length)];
}
/* If reaches bottom of page do something code
window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
}
};
*/@keyframes jump {
0% { transform: translate(0,0); }
20% { transform: translate(0,-95%); }
40% { transform: translate(0,15%); }
60% { transform: translate(0,-10%); }
80% { transform: translate(0,0%); }
100% { transform: translate(0,0); }
}
body{
scroll-snap-type: y mandatory;
-webkit-overflow-scrolling:touch;
}
html, body{
position:absolute;
overflow:auto;
overflow-x: hidden;
margin:0;
height: 100vh;
width:100%;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color:white;
}
#greeting{
position:absolute;
width:100%;
font-size:75px;
font-family: 'Roboto Condensed', sans-serif;
text-align:center;
margin-top:75%;
color:black;
}
#slideUp{
position:absolute;
height:5%;
width:100%;
font-size:70px;
font-family: 'Roboto Condensed', sans-serif;
text-align:center;
margin:0;
bottom:10%;
color:#686868;
-moz-animation: jump 2.5s 3s infinite;
-webkit-animation: jump 2.5s 3s infinite;
-o-animation: jump 2.5s 3s infinite;
animation: jump 2.5s 3s infinite;
}
#scrollCont{
position:absolute;
overflow: scroll;
top:0;
height: 100vh;
width:100%;
-webkit-overflow-scrolling: touch;
scroll-snap-type: mandatory;
scroll-snap-points-y: repeat(100vh);
scroll-snap-type: y mandatory;
-webkit-scroll-snap-stop: normal;
scroll-snap-stop: normal;
}
.row{
position: relative;
width:100vw;
height: 100vh;
-webkit-scroll-snap-align: start end;
scroll-snap-align: start end;
scroll-snap-stop: always;
}
#home{
position: relative;
width:100vw;
height: 100vh;
-webkit-scroll-snap-align: none;
scroll-snap-align: none;
}
#flower{
width:150%;
}
#secondRow{
color:black;
word-wrap: break-word;
background-color:#a0dfff;
overflow:hidden;
}
#secondRow .title{
padding-top:5%;
color:black;
font-weight: 100;
font-family: 'Lato', sans-serif;
font-size: 62.5px;
margin-left:10%;
margin-top:5%;
}
#secondRow hr{
border-color: black;
}
#bodyCont{
font-size:40px;
position:relative;
top:10%;
left:10%;
width:80%;
color:black;
font-family: 'Lato', sans-serif;
}
#thirdRow{
background-color:black;
}
#thirdRow .title{
padding-top:5%;
color:white;
font-weight: 100;
font-family: 'Lato', sans-serif;
font-size: 62.5px;
margin:0;
margin-left:10%;
}
#thirdRow hr{
border-color: white;
}<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Lato:300|Roboto+Condensed&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="mainMenu.css">
<link rel="stylesheet" type="text/css" href="indexR2.css">
<link rel="stylesheet" type="text/css" href="indexR3.css">
<script src="mainMenu.js"></script>
</head>
<body onload="startGreet()">
<div id="scrollCont">
<div id="home">
<h1 id="greeting" ></h1>
<p id="slideUp" >^ ^ ^</p>
</div>
<div id="secondRow" class="row">
<h1 class="title">Introduction</h1>
<hr>
<div id="bodyCont">
<p><i>text text text text text</i></p>
<img id="flower" src="https://cdn.pixabay.com/photo/2012/04/18/19/18/shrub-37619_640.png"/>
</div>
</div>
<div id="thirdRow" class="row">
<h1 class="title">Introduction</h1>
</div>
</div>
<!--<img id="videos" src="https://www.sccpre.cat/mypng/full/15-156384_old-camera-png-camera-drawing-transparent-background.png"/>-->
</body>
</html>Please note that this website is intended to function properly only on mobile devices, so viewing it on other devices may result in formatting issues.