Odd thing that happens to linear gradient background?

Hey all,

I’m working on a personal front end project, and at the bottom of my page I’ve made a canvas element to do some javascript rendering on. I’ve assigend the canvas’ background to a linear gradient so it blends into the bottom of the page, and it works when the page’s dimensions are 1440x934

However doesn’t work when the page is 1920x1080.

Or at least the transparency doesn’t come through. It’s so odd. Any thoughts?
Here is the CSS code I’m using to generate the linear gradient

  background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 38%, rgba(0,0,0,1) 100%);
  background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 38%,rgba(0,0,0,1) 100%);
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 38%,rgba(0,0,0,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 );