HTML content underneath WebGL animation not clickable

I am trying to figure out why HTML content underneath a WebGL animation cannot be clicked or interact with.

Please see example.

Currently the div containing the animation is set to:

.webgl-glitch {
    position: absolute;
    z-index: 2;
    overflow: hidden;
    opacity: 0.5;
}

..otherwise it will not display at all.

I have tried setting a z-index: 1; property on the header/container div, but this does not seem to help.

Here is the HTML section of the header including the animation div:

<!-- Begin Header animation -->
<div class="webgl-glitch"></div>
<!-- End Header animation -->


<header id="principalheader" class="centerContainer aligncenter fullScreen tintBackground stonebackground" style="z-index:1">
    <div>
        <div class="container">
            <!-- Site logo-->
            <a href="#" class="logo"><img alt="KUBO" src="img/logo.png"></a>
            <!-- Site Principal slogan-->
            <h1>Digital Exploration for the the digital age</h1>
            <!-- Site Resume-->
            <div class="row">
                <div class="hidden-xs col-md-10 col-md-offset-1">
                    <h2>CRAFT experiences that <strong>defy</strong> expectations<br/>
                        CREATE from the the twin <strong>virtues</strong> of inspiration and innovation<br/>
                        BEAUTY in simplicity and complexity <strong>combined</strong> for the best of both worlds</h2>
                </div>
                <div class="col-md-10 col-md-offset-1">
                    <a class="fa fa-angle-down" href="#" data-scrollto="#about"></a>
                </div>
            </div>
        </div>
    </div>
</header>

Another thing I have noticed is that if I wrap the .web-glitch animation div inside a HTML5 canvas element it also does not display at all? why would this be?

The only property I have on canvas in the the CSS at the moment is width: 100%;

via Chebli Mohamed