After updating my website to Bootstrap5, I noticed that one of the pages was not behaving correctly. Upon investigation, I found that the issue was related to this particular block of CSS:
body:before {
content: '';
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
box-shadow: inset 0 0 100px 20px #14BD63;
}
Interestingly, the presence of this CSS seems to interfere with the functionality of a button on the page. Removing the CSS allows the button to function as expected. What could be causing this conflict?
html,
body {
margin: 0;
padding: 0 0 0 0;
}
body:before {
content: '';
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
box-shadow: inset 0 0 100px 20px #14BD63;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ed8f8282999e999f8c9dadd8c3dfc3dd">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<!-- Wrapper container -->
<div class="container py-4">
<!-- Bootstrap 5 starter form -->
<form id="contactForm">
<div class="row">
<div class="col text-center my-auto">
<button type="button" class="btn btn-outline-info btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<span class="fa fa-calendar"></span> Cohort Year
</button>
<ul id="ddCohort" class="dropdown-menu csr_lnk" style="">
<li> <input type="checkbox" class="d-inline ddCohort" id="inpCohort2026" value="2026" onclick="ddUserSelectedCohortChanged(this.value);"><label for="inpCohort2026" class="d-inline input small dropdownLabel_NormalFont">2026</label></li>
<li> <input type="checkbox" class="d-inline ddCohort" id="inpCohort2025" value="2025" onclick="ddUserSelectedCohortChanged(this.value);"><label for="inpCohort2025" class="d-inline input small dropdownLabel_NormalFont">2025</label></li>
<li> <input type="checkbox" class="d-inline ddCohort" id="inpCohort2024" value="2024" onclick="ddUserSelectedCohortChanged(this.value);"><label for="inpCohort2024" class="d-inline input small dropdownLabel_NormalFont">2024</label></li>
<li> <input type="checkbox" class="d-inline ddCohort" id="inpCohort2023" value="2023" checked="" onclick="ddUserSelectedCohortChanged(this.value);"><label for="inpCohort2023" class="d-inline input small dropdownLabel_NormalFont">2023</label></li>
<li> <input type="checkbox" class="d-inline ddCohort" id="inpCohort2022" value="2022" onclick="ddUserSelectedCohortChanged(this.value);"><label for="inpCohort2022" class="d-inline input small dropdownLabel_NormalFont">2022</label></li>
</ul>
</div>
</div>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="30525f5f44434442514070051e021e00">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>