If you check out the video linked here: , you'll witness the issue in action. Essentially, my code structure resembles the following:
<section id="sidenav">
<h1>TEXT HERE</h1>
<ul>
<li>Tab One</li>
<li>Tab Two</li>
<li>Tab Three</li>
<li>Tab Four</li>
</ul>
<div id="tab"></div>
</section>
The sidenav is positioned absolutely as shown below:
#sidenav {
position: absolute;
top: 200px;
left: 0px;
width: 770px;
padding: 30px 0px 20px;
background: rgba(255, 255, 255, 0.85);
-webkit-transition: left 0.75s ease-in-out;
-webkit-backface-visibility: hidden;
z-index: 10; /* This fixed it. */
}
#sidenav.hidden {
left: -768px;
}
I've also incorporated the following jQuery script:
$("#tab").click(function(){
$("#sidenav").toggleClass("hidden");
});
However, during the animation, the elements within the section don't synchronize properly. They tend to lag or stay stationary when the toggle occurs. Although they appear inactive, I can't interact with them. The elements usually catch up once the side nav reemerges, but sometimes they remain glitchy until I hover over the <li>'s.
Please note that this issue only arises in Safari and Chrome on desktop devices. Safari on iPad and Firefox operate without any problems.
Thank you! Andrew
FIX EDIT:
After adding a z-index of 10 (or any value) to the sidenav element, the problem was resolved. Some individuals requested my entire CSS code, which I included in this post. While I'm uncertain why adjusting the z-index rectified the issue, I'm eager to understand the reasoning behind it. I am still offering my reward to whoever provides an explanation. Thank you!