I am working on a web application to be used primary on mobile devices.
I'm using python, flask, jinja, html and css(scss) and i'm avoiding js. For readability I removed the python/jinja code from the example, because it just adds more question sections queried of a db and does not affect the behavior.
I add buttons for maneuvering the site and in the desktop version it works fine. While in mobile it works as well as long as the URL bar on top is not visible. When the URL bar shows up I am able to click the button (it response by changing the border color) but the action is not triggered.
I'm guessing it has something to do with the div wrapper which contains the buttons but they are mandatory to achieve the double scroll-snap functionality (as far as i am able to do it). this answer suggests a problem with the div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/quiz_base.css">
</head>
<body>
<div class="container">
<section id="landing_page">
<h1>Landing Page</h1>
<br />
<input type="button" onClick="document.getElementById('question_1').scrollIntoView({behavior: 'smooth'});" value="Start Quiz" />
</section>
<section id="quiz_section">
<div class="container">
<section id="question_1">
<h1>Page1</h1>
<br />
<h3>Question Text 1</h3>
<input type="button" onClick="document.getElementById('question_2').scrollIntoView({behavior: 'smooth'});" value="NEXT question_2" />
</section>
<section id="question_2">
<h1>Page2</h1>
<br />
<h3>Question Text 2</h3>
<input type="button" onClick="document.getElementById('question_1').scrollIntoView({behavior: 'smooth'});" value="NEXT question_1" />
</section>
</div>
</section>
</div>
</body>
</html>body {
width: 100vw;
height: 100vh;
margin: 0;
}
body .container {
width: 100%;
height: 100%;
-ms-scroll-snap-type: y mandatory;
scroll-snap-type: y mandatory;
overflow-y: scroll;
}
body .container section {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100vw;
height: 100vh;
scroll-snap-align: start;
background-color: green;
}
body .container section .container {
width: 100%;
height: 100%;
-ms-scroll-snap-type: x mandatory;
scroll-snap-type: x mandatory;
overflow-x: scroll;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
body .container section .container section {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100vw;
height: 100vh;
scroll-snap-align: start;
background-color: #b0b2b9;
}
body .container section .container section h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 5em;
}I also thought about the difference between onClick and touch, but as it works when the URL bar on top is not visible, I suggest it has nothing to do with touch behavior. Am I wrong? stack question on touch behavior
As I am an Android user I just tested with Chrome for Android.
Thanks for helping me out, I'm still new to web-dev...
