Does anyone know why, when clicking on the back side of a div that has been rotated with rotateY, the clicks pass through to the next div inside the body tag instead of registering on the intended div? And is there a way to fix this issue?
You can view the problem here. It seems to be specifically not working in Chrome.
If you click on the Packages option in the left menu, the submenu will flip out from behind the main menu. However, when you try to click on a submenu item, it closes because the browser interprets the click as occurring on the off-canvas-wrapper element which triggers the menu to close. Even eliminating the jQuery click event from off-canvas-wrapper doesn't prevent the click events from passing through the flipped div.
Thank you for taking the time to look into this matter.
HTML:
<div id="menu" class="menu">
<img src="http://test.peoples1.com/wp-content/themes/JointsWP-master/library/images/menu-est-icon.png">
<div class="menu-phone">
<p>800-325-6598</p>
</div>
...
...
// The rest of the HTML code here...
...
...
</ul>
</div>
...
<div class="off-canvas-wrap" data-offcanvas="">
CSS:
.card {
position: absolute;
top: 0px;
left: 0px;
...
...
// CSS styles continue here...
...
...
}
// More CSS styles...
Jquery:
/* JavaScript functions and events */
$(document).ready(function() {
$(".menu-main > li").hover(function() {
// Hover function logic...
});
// Other jQuery functions continue here...
});