Rotated Div Click Events

Question

When I click the back side of a rotateY'ed div, the clicks pass through to the next div inside the body tag, instead of registering on the div I'm actually clicking on. Does anyone know what is going on here and how to fix it?

The problem can be seen here . It does not work in Chrome, specifically.

If you click on Packages in the menu on the left, the sub menu will flip out from behind the main menu, and then if you try to click a sub menu item, it closes the menu because the browser thinks you're clicking on off-canvas-wrapper which closes the menu. Even if I remove the jquery click event from off-canvas-wrapper, click events still pass through this flipped div.

Thank you for taking a look at this.

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>
        <ul class="menu-main">
            <li class=""><a href="/home">Home</a></li>
            <li class=""><a href="/about">About</a></li>
            <li class="menu-item-packages"><a href="#">Packages</a></li>
            <li class=""><a href="/quick-ownership">Quick<br>Ownership</a></li>
            <li><a href="/corporate-housing">Corporate<br>Housing</a></li>
            <li><a href="/home-staging">Home<br>Staging</a></li>
            <li><a href="/contact">Contact</a></li>
        </ul>
    </div>

    <div class="menu-button">
        <a href="#" class="menu-button-icon"> </a>
        <a href="#" class="menu-button-text"> MENU</a>
    </div>

    <div class="card flipped-reset">
        <ul class="sub-menu menu-packages">
            <li><a href="/packages/economy">Economy</a></li>
            <li><a href="/packages/standard">Standard</a></li>
            <li><a href="/packages/executive">Executive</a></li>
        </ul>
    </div>

<div class="off-canvas-wrap" data-offcanvas="">

CSS:

.card {
    position: absolute;
    top: 0px;
    left: 0px;

    height: 100%;
    width: $menu-width;

    z-index: 9;
    background-color: $menu-sub-background;

    -ms-transform-origin: right;
    -webkit-transform-origin: right;
    transform-origin: right;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: 0.8s;
    -moz-transform-style: preserve-3d;
    -moz-transition: 0.8s;
    -ms-transform-style: preserve-3d;
    -ms-transition: 0.8s;
    -o-transform-style: preserve-3d;
    -o-transition: 0.8s;
    transform-style: preserve-3d;
    transition: 0.8s;

    -webkit-perspective: 500;
    -webkit-backface-visibility: hidden;

 }

.card:after {
    background-color: $menu-sub-background;
}

 .menu-packages { 
    height: 100%;
    width: 100%;
    margin: 0px;
    padding-top: 20em;

    background-color: $menu-sub-background;
    list-style-type: none;

    transform:rotatey(-180deg);
    -ms-transform:rotatey(-180deg); /* IE 9 */
    -moz-transform:rotatey(-180deg); /* Firefox */
    -webkit-transform:rotatey(-180deg); /* Safari and Chrome */
    -o-transform:rotatey(-180deg); /* Opera */

    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
}

.flipped {
    transform:rotatey(-180deg);
    -ms-transform:rotatey(-180deg); /* IE 9 */
    -moz-transform:rotatey(-180deg); /* Firefox */
    -webkit-transform:rotatey(-180deg); /* Safari and Chrome */
    -o-transform:rotatey(-180deg); /* Opera */

    perspective: 500px;
}

Jquery:

/* card flip */
        $(document).ready(function() {

            $(".menu-main > li").hover(function() {
                if (!($(this).hasClass("active"))) {
                    $(this).toggleClass("menu-active-item");
                }
            }, function() {
                if (!($(this).hasClass("active"))) {
                    $(this).toggleClass("menu-active-item");
                }
            });

            //Main Menu Functions
            $(".menu-button").click(function(){
                $(".menu").toggleClass("menu-active");
                $(".menu-button").toggleClass("menu-button-menu-active");
            });

            //Menu Button Functions
            $("div.menu-button").hover(function(){
                $(this).toggleClass("menu-button-hover");
                $(".menu-button-icon").toggleClass("menu-button-icon-hover");
                $(".menu-button-text").toggleClass("menu-button-icon-text");
            }, function() {
                $(this).toggleClass("menu-button-hover");
                $(".menu-button-icon").toggleClass("menu-button-icon-hover");
                $(".menu-button-text").toggleClass("menu-button-icon-text");
            });

            //Sub Menu Functions
            $(".menu-item-packages").click(function(){
                $(this).addClass("menu-active-item");
                if ($(this).hasClass("active")) {
                    $(this).removeClass("active");
                    //This function needs to increase the width of the menu wrapper in order for the submenu links to work.
                    $(".menu-wrapper").width(170);
                }
                else {
                    $(this).addClass("active");                        
                    $(".menu-wrapper").width(340);
                }
                //$(".card").offset({left: 0});
                $(".card").removeClass("flipped-reset");
                $(document).find(".card").toggleClass("flipped");
                $(".menu-button").toggleClass("menu-button-sub-menu-active");

            }); 

            //Sub Menu Hover
            $(".sub-menu > li").hover(function() {
                $(this).toggleClass("sub-menu-item-hover");
            }, function() {
                $(this).toggleClass("sub-menu-item-hover");
            });

            //Menu Close
            $(".inner-wrap").click(function(){
                $(document).find(".menu-active").removeClass("menu-active");
                $(".menu-button-menu-active").removeClass("menu-button-menu-active");
                $(".menu-button-sub-menu-active").removeClass("menu-button-sub-menu-active");
                if ($(document).find(".card").hasClass("flipped")) {
                    $(document).find(".card").removeClass("flipped");
                    $(document).find(".card").addClass("flipped-reset");
                }
                $(".menu-wrapper").width(170);
            });

        })

Answer 1

When the sub menu is show, this css is style is on

-webkit-backface-visibility: hidden;

Change to when the flip is registered

-webkit-backface-visibility: visible;

This will work for webkit browsers so you'll need to add the corresponding styles for other browsers.

HTH