https://i.sstatic.net/Kcj4h.png
I recently encountered an issue while working on a webpage utilizing Bootstrap 4. After resolving a horizontal scrollbar problem on mobile devices by adding overflow-x:hidden to the html tag, I noticed that the vertical scrollbar began acting strangely and was no longer responsive to clicks most of the time (even though it still registered clicks on content behind it).
This behavior is new and I am unsure what caused it as I did not make any changes to z-index or scrollbar settings...
My browser, Chrome, should be displaying the standard unstyled scrollbar which is not behaving like this at all. Can someone help me understand why this happened and how to rectify it?!
Edit: Since this issue is present across all pages consistently, the error is likely in the main template, specifically in the header. Perhaps someone can identify the mistake:
<!doctype html>
<html lang="en" style="overflow-x: hidden;">
<head>
{% load static %}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="{% static 'css/main.css' %}">
<link rel="icon" href="{% static 'bilder/icons/019-rocket.svg' %}">
<title>Online-Nachhilfe</title>
<style>
body {
margin:0;padding:0;
background-image: url({% static 'bilder/Rastergrafik.png' %});
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
overflow-x: hidden !important;
position:relative;
z-index:0;
min-height: 101vh;
text-align: center;
}
</style>
{% block head %}
{% endblock %}
</head>