Search code examples
csswebkit

CSS3 Element with Opacity:0 (invisible) responds to mouse events

CSS3 using Webkit in Safari; I have a button that, when clicked, causes a div to fade in. That div is just a big filled rectangle and it has a few buttons in it, one of whichcauses the same div to fade out.

The problem is this: When the element has faded out (opacity:0), and I click where one of the buttons was, the onClick is still being fired. In otherwords, even though the button can't be seen (opacity:0) it's still there and is part of the event model. I don't want that.

The buttons call the following functions:

//  This displays the overlay (popup)
function showCategoryPopup() {

 // Was playing with the following, but with no success.
 //  popupCategory.style.display = "block";
 //  popupCategory.style.visibility = "visible";

 // Change the attributes that will be animated.
 popupCategory.style.opacity = 1; 
 popupCategory.style.webkitTransform = "scale(1.0)";
}

function hideCategoryPopup() {
 // Change the animated attributes
 popupCategory.style.opacity = 0; 
 popupCategory.style.webkitTransform = "scale(0.7)"; 


// Even if opacity is 0, we still get mouse events.  So, make it hidden?
//    popupCategory.style.visibility = "hidden";
//    popupCategory.style.display = "none";

}

The CSS class for the overlay is this:

.popupContainer {
    opacity: 0;
    -webkit-transform: scale(0.7);
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-in-out;
    -webkit-transition-delay: initial;
}

If I don't use the visibility or display settings at all, the animation is fine, but the mouseClick events are triggered for the invisible items.

If I use the blocks, then it toggles on/off with no animation.

If I use the display style, then it sort of works but instead of having the animation display immediately, it only triggers once some other event in the page is triggered, like another button elsewhere on the page.

I thought maybe of adding the "pointer-events:none" to the style used by the pop-up div after it's hidden, but what I'm asking for seems like something you'd often encounter with opacity so it must be a semi-frequent problem.

Thoughts?

Solution

  • If you're setting your div to have an opacity of zero, you're still going to be able to interact with the "invisible" item. You want to set it to display:none instead. You could do both, allowing the div to fade out to zero and then tack on the display:none when the animation has finished.