I've done something (I obviously can't work out what) that has messed up scrolling on Google Chrome desktop browser on a single page on my site. I am using html templates (Django), but the issue still occurs when I construct a complete webpage, as below. Also worth noting is that I'm using tailwindcss, but again this doesn't seem to be directly connected to the problem.
The weird thing is that the mouse wheel scroll works in Firefox and on mobile, and even pressing Page Down/Up, dragging the scrollbar, and selecting text works as expected on desktop, just not mouse wheel. I've searched for similar issues on here, but the ones I found didn't prove useful in my case.
I believe the problem revolves around a wrapper element which is set to overflow-y: auto and has a perspective of 3px with some parallax sections. (However, removing this attribute seems to have no effect on the issue.) Another page with exactly the same wrapper element, but no parallax sections doesn't have the same problem, so it doesn't seem to be the scroll settings on the wrapper itself. Below is the full template:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Tailwind CSS-->
<link href="../../static/main/css/tailwind.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="../../static/main/css/temp.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
<body class="h-screen">
<header>
<nav class="_navbar" role="navigation">
<div class="nav-cont flex items-center">
<div class="nav-flex-left w-1/2">
<a id="logo-container" href="#" class="font-semibold text-white no-underline text-3xl md:text-4xl my-2 md:my-1">Brand Logo</a>
</div>
<div class="w-1/2 md:hidden nav-flex-right text-3xl items-center">
<div class="my-2" onclick="openMenu()"><i id="hamburger" class="fas fa-bars cursor-pointer "></i></div>
</div>
<div class="w-1/2 hidden md:block">
<ul class="nav-flex-right">
<li class="md-nav-link"><a href="#" class="_nav-link">Nav 3</a></li>
<li class="md-nav-link"><a href="#" class="_nav-link">Nav 2</a></li>
<li class="md-nav-link"><a href="#" class="_nav-link active">Nav 4</a></li>
</ul>
</div>
</div>
<div id="smMenu" class="flex flex-col bg-purple-800 pt-2 pb-4 px-1 space-y-3 hidden rounded-b-lg shadow-lg">
<a href="#" class="_nav-link active sm-nav-link hover:bg-purple-700 rounded w-1/2">Nav 1</a>
<a href="#" class="_nav-link sm-nav-link hover:bg-purple-700 rounded w-1/2">Nav 2</a>
<a href="#" class="_nav-link sm-nav-link hover:bg-purple-700 rounded w-1/2">Nav 3</a>
</div>
</nav>
</header>
<main id="main-wrapper" class="flex flex-col items-center justify-center bg-blue-300">
<!--{% block content %}-->
<div id="wrapper" class="z-20">
<section id="top" class="section parallax bg1 non-static">
<div class="flex items-center">
<div class="flex-auto w-screen text-center"><h1
class="text-center text-purple-200 text-8xl md:mt-20 md:text-9xl mb-10" style="font-family: Shoulders">
Virtual Practice</h1>
<h1 class="text-2xl font-semibold md:text-6xl shoulders-bold">Time for a tech makeover?</h1></div>
</div>
</section>
<section id="middle" class="section mb-10 bg-gray-200 shadow-lg ">
<div class="container mx-auto">
<div class="flex justify-center items-center">
<div class="flex flex-col space-y-4 p-4 md:space-y-0 md:space-x-4 md:py-0 md:px-4 md:flex-row text-purple-500">
<div class="flex-auto barlow bg-white rounded-lg p-4 shadow-lg">
<div class="text-center shoulders-bold"><i class="fas fa-hands-helping text-5xl mb-2"></i>
<h1 class="mb-5 font-semibold text-purple-800 text-2xl">Title 1</h1></div>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi quis commodo odio aenean sed adipiscing. Consequat interdum varius sit amet mattis vulputate. Fringilla urna porttitor rhoncus dolor purus non enim praesent. In cursus turpis massa tincidunt dui ut ornare lectus sit. Fermentum iaculis eu non diam phasellus vestibulum. Malesuada fames ac turpis egestas maecenas pharetra. Dignissim convallis aenean et tortor at risus viverra adipiscing. Eu nisl nunc mi ipsum faucibus vitae aliquet. Mi ipsum faucibus vitae aliquet nec ullamcorper sit amet. Elementum nisi quis eleifend quam. Euismod elementum nisi quis eleifend quam adipiscing vitae. Pulvinar mattis nunc sed blandit. Ipsum dolor sit amet consectetur adipiscing elit.</p></div>
<div class="flex-auto barlow rounded-lg p-4 bg-white shadow-lg">
<div class="text-center shoulders-bold"><i class="fas fa-laptop-house text-5xl mb-2"></i>
<h1 class="mb-5 font-semibold text-purple-800 text-2xl">Title 2</h1></div>
<p class="text-justify">Condimentum vitae sapien pellentesque habitant morbi. Sagittis orci a scelerisque purus semper eget duis at tellus. Sit amet nulla facilisi morbi tempus iaculis. Magna eget est lorem ipsum dolor sit amet consectetur adipiscing. Mauris pharetra et ultrices neque ornare. Ut tellus elementum sagittis vitae. Ut tristique et egestas quis. Ut porttitor leo a diam sollicitudin tempor id eu nisl. Quam adipiscing vitae proin sagittis nisl. Enim eu turpis egestas pretium aenean. Sollicitudin tempor id eu nisl. Turpis in eu mi bibendum neque. Sed viverra tellus in hac habitasse platea dictumst. Id venenatis a condimentum vitae. Enim neque volutpat ac tincidunt vitae semper quis lectus nulla. Proin libero nunc consequat interdum varius sit amet mattis. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi. Tincidunt arcu non sodales neque sodales ut etiam sit. Sed vulputate mi sit amet mauris commodo quis imperdiet massa.</p></div>
<div class="flex-auto barlow bg-white rounded-lg p-4 shadow-lg">
<div class="text-center shoulders-bold"><i class="fas fa-weight-hanging text-5xl mb-2"></i>
<h1 class="mb-5 font-semibold text-purple-800 text-2xl">Title 3</h1></div>
<p class="text-justify">Facilisis magna etiam tempor orci eu lobortis. Malesuada fames ac turpis egestas maecenas pharetra. Mollis aliquam ut porttitor leo. Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus est. In hendrerit gravida rutrum quisque non tellus orci. Ac turpis egestas integer eget aliquet nibh praesent tristique magna. Egestas erat imperdiet sed euismod nisi porta lorem. Porttitor lacus luctus accumsan tortor posuere. Nam aliquam sem et tortor consequat. Cursus turpis massa tincidunt dui ut ornare. Amet consectetur adipiscing elit duis tristique sollicitudin nibh sit. Augue neque gravida in fermentum et sollicitudin ac. Vel orci porta non pulvinar neque laoreet suspendisse interdum. Velit ut tortor pretium viverra suspendisse potenti.</p></div>
</div>
</div>
</div>
</section>
<section id="bottom" class="section h-1/2 parallax bg2 non-static">
<div class="flex flex-col w-screen text-center px-4"><h1 class="flex-auto text-3xl font-semibold shoulders-bold">Sagittis purus sit amet volutpat consequat mauris nunc.</h1>
<div class="flex flex-auto my-10 justify-center space-x-4 md:space-x-20">
<a href="tel:+123123123123" class="callout-btn">Call Now
</a>
<a href="#" class="callout-btn">Contact
Online
</a>
</div>
</div>
</section>
<section id="footer" class="bg-gray-200 shadow-lg" style="min-height: 30vh">
<div class="container mx-auto">
<div class="flex justify-center items-center">
<div class="flex flex-col items-center space-y-4 p-4 md:space-y-0 md:space-x-4 md:py-0 md:px-4 md:flex-row text-purple-500 my-3">
<div class="flex-auto items-center bg-white rounded-lg p-4 shadow-lg">
<div class="text-center">
<h1 class="mb-5 font-semibold text-purple-800 text-2xl shoulders-bold">More reasons to choose us:</h1></div>
<p>Ornare lectus sit amet est placerat in egestas erat. Orci nulla pellentesque dignissim enim sit amet venenatis urna. Imperdiet proin fermentum leo vel orci porta. Sed lectus vestibulum mattis ullamcorper velit sed ullamcorper. Neque ornare aenean euismod elementum. Aliquet nec ullamcorper sit amet. Vel facilisis volutpat est velit egestas dui id ornare. Diam vel quam elementum pulvinar etiam non quam lacus suspendisse. Id ornare arcu odio ut sem. Mauris nunc congue nisi vitae suscipit tellus mauris a diam. Maecenas sed enim ut sem viverra aliquet eget. Vel fringilla est ullamcorper eget. Nunc id cursus metus aliquam. Id nibh tortor id aliquet lectus proin nibh. Ipsum faucibus vitae aliquet nec ullamcorper sit.</p>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<!--{% endblock content %}-->
</main>
<footer id="footer" class="flex justify-center bg-gray-100 shadow-inner" style="max-height: 6vh; z-index: 9999"><div class="flex items-center container justify-between py-3"><p>Copyright © Brand 2020</p><p>©<a class="brown-text text-lighten-3" href="http://google.com">Goigyle</a> 2021</p></div>
</footer>
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
crossorigin="anonymous"></script>
<script type="application/javascript" src="../../static/main/js/main.js"></script>
</body>
</html>
and the relevant CSS:
body {
overflow: auto;
}
#main-wrapper {
overflow-y: hidden;
overflow-x: hidden;
width: 100vw;
height: 94vh;
padding-top: 64px;
}
#wrapper {
perspective: 4px;
width: 100vw;
overflow-y: auto;
overflow-x: hidden;
z-index: 100;
}
.section {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 50vh;
}
.bg1::after {
background-image: url('../img/nurse_ipad@0,25x.jpg');
background-position: center bottom;
background-size: cover;
}
@media(max-width: 576px) {
.bg1::after {
background-position: 10% 100%;
}
}
.bg2::after {
position: relative;
background-image: url('../img/worried@0,25x.jpg');
background-position: center top;
background-size: cover;
}
.static {
min-height: 60vh;
padding-top: 2rem;
padding-bottom: 2rem;
}
.non-static {
color: white;
text-shadow: 3px 3px 5px #000;
min-height: 50vh;
}
#bottom {
margin-top: 3rem;
}
.parallax::after {
content: " ";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
transform: translateZ(-1px) scale(1.6);
-webkit-transform: translateZ(-1px) scale(1.6);
-moz-transform: translateZ(-1px) scale(1.6);
z-index: -1;
}
and just in case, heres my tailwindcss source css file:
@tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
font-family: "Shoulders";
src: url("../fonts/BigShouldersInlineText-Regular.ttf");
font-display: swap;
}
a {
@apply no-underline hover:underline font-semibold
}
@keyframes openMenu {
0% {height: 30%;}
75% {height: 95%;}
100% {height: 100%;}
}
._navbar {
@apply bg-purple-800 shadow-lg fixed text-white justify-center items-center py-1;
height: 64px;
width: 100%;
z-index: 1;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
._navbar a {
@apply no-underline hover:no-underline
}
.nav-cont {
@apply container mx-auto px-4;
}
.nav-flex-left {
@apply flex flex-row;
}
.nav-flex-right {
@apply flex flex-row-reverse;
}
._nav-link {
@apply font-semibold text-purple-300 hover:text-purple-400 hover:shadow-sm;
}
.md-nav-link {
@apply ml-5 my-4
}
.sm-nav-link {
@apply px-4
}
.active {
@apply text-white hover:text-white;
}
.callout-btn {
@apply px-3 rounded-xl bg-purple-800 hover:bg-purple-900 hover:no-underline text-white text-center h-16 flex-auto shadow-lg hover:shadow-sm border-2 border-purple-800 hover:border-purple-200 cursor-pointer px-4 flex items-center justify-center text-lg md:text-2xl py-4 md:py-3;
font-family: Big Shoulders Text;
width: 10rem;
}
input {
width: 100%;
border-radius: 5px;
padding-left: .5rem;
margin-bottom: 1rem;
}
textarea {
width: 100%;
border-radius: 5px;
padding-left: .5rem;
padding-right: .5rem;
}
label {
font-size: .8rem;
}
.home-title {
font-size: 5rem;
color: white;
}
.home-subheading {
font-size: 2.5rem;
text-shadow: 2px 2px #000;
}
.main-title {
font-size: 3rem;
color: white;
}
.subheading {
font-size: 1.5rem;
}
/*Training Units page*/
.jumbotron {
background: url("../img/elearning-wide.png") no-repeat #ddd6fe;
background-size: contain;
background-position: center;
padding-top: 2rem;
padding-bottom: 2rem;
margin-bottom: 0;
border-radius: 25px;
height: 40vh;
}
.jumbotron p:last-child {
margin-bottom: 0;
}
.choice-btn {
width: 5rem;
}
@media (max-width: 991px) {
.jumbotron {
background: url("../img/elearning.png") 55% 80% no-repeat #ddd6fe;
background-size: contain;
border: 4px solid #593196;
border-radius: 12px;
padding-top: 3rem;
padding-bottom: 3rem;
padding-right: 1rem;
padding-left: 1rem;
height: 30vh;
}
}
/*Wider screened smartphones*/
@media (max-width: 414px) {
}
/*Normal screened smartphones*/
@media (max-width: 375px) {
}
/*Smaller screened smartphones:*/
@media (max-width: 320px) {
}
I've tried what I believe are all the possible combinations of z-index and overflow-y, I've tried zooming the page as it said in other answers, and now I'm completely stumped with all my research coming to nothing.
Beware: it does seem to scroll when using Brackets Editor's Live view but I think this is due to it looking at the page more as separate elements which can be scrolled into view when the relevant code is selected if that makes sense.
I would be incredibly grateful if anyone can shed some light on why this might have started happening, and possibly guide me out of the mess I have made and towards a more surefire way to acheive what I want re: scrolling the middle section of a page (between top navbar and footer).
EDIT: full (purged) tailwind.css here if you need it.
Found a workaround. Adding transform: translateZ(0) to my main content sets the user input to that instead and I can scroll again.