Click event erroneously firing on div which is not visible due to CSS translateZ transform.

[samuknet]

When an element has been transformed such that it is no longer visible, clicking anywhere on the page in Servo fires a click event on the element.

In example below, FF/Chrome the click event (correctly) does not fire. In Servo, clicking anywhere on the page fires the event, even though the is "behind the screen" and not visible.

<style>
        body {
            margin: 0;
            padding: 0;
        }
        div {
            border: 1px solid black;
            width: 100vw;
            height: 100vh;
            background-color:#83D0FC;
            transform: perspective(500px) translateZ(500px);
        }
</style>
<div></div>
<script>
        document.querySelector('div').addEventListener('click', function() {
            console.log('Event firing when div not visible on page');
        });
</script>

Online test case here.

[jdm]

@pcwalton I guess hit testing is somehow not taking the transform into account? Could you look into this?

[samuknet]

@jdm Out of interest, just to take a look, where could I find the relevant hit testing code? I would just be interested to read it and further my understanding a little.

[jdm]

Look for the code that assigns hit_test_response from components/layout/query.rs. I'd give a better answer but I'm getting on an airplane :)

[pcwalton]

@jdm It may be that the code that determines whether to check the descendants of a stacking context isn't taking the transform into account, and as such its items never get checked.

[mrobinson]

Hit testing takes into account transforms, but only in the x and y dimension, which is why I think this test is failing.

[dralley]

This still happens