Chrome mouse events do not work with webkit-transform elements in background

Question

I've got two divs. Page1 has a button ... if you hover over it it will change it's color.

If I add a page2 div in the background with a webkit-transform the button won't change it's color anymore.

HTML

<div class="page1">
    <button>hover</button>
</div>
<div class="page2"></div>

CSS

.page1 {
    width: 300px;
    height: 300px;
    border: 1px solid #333;
    position: relative;
    background: #FFF;
    z-index: 2;
}
.page2 {
    width: 300px;
    height: 300px;
    background: #999;
    border: 1px solid #333;
    -webkit-transform: matrix3d(0.78784, 0, 0.13891, -0.00034, 0, 0.8, 0, 0, -0.17364, 0, 0.9848, -0.00246, 0, 0, 0, 1);
    position: absolute;
    top: 0;
    left: 50px;
    z-index: 1;
}
button {
    position: absolute;
    top: 50%;
    right: 1px;
    background: green;
    border: 0;
    font-size: 18px;
    color: #FFF;
}
button:hover {
    background: red;
}

jsfiddle

Answer 1

As you already stated, the element .page2 is being rendered in front of the other element because of the transform property.

One way to solve this would be to add pointer-events: none to the element in order to prevent it from affecting the other element.

.page2 {
    pointer-events: none;
}

As MDN states:

the value 'none' instructs the mouse event to go "through" the element and target whatever is "underneath" that element instead.

UPDATED EXAMPLE - just be aware of pointer-events's support.

An alternative to pointer-events, would be to bring the element forward with translateZ.

EXAMPLE HERE

button {
    -webkit-transform: translateZ(20px);
}