Firefox problems come from DOM issues (canvas size defaults to 0,0) and document.width is undefined... Since I'm in no mood to figure out which incantation to call, the following hard-codes the dimensions in very inelegant manner.
<canvas id="webgl-canvas" style="border: none;" width="800" height="600"></canvas>
function webGLStart() {
try {
var canvas = document.getElementById("webgl-canvas");
//canvas.width = document.width;
//canvas.height = document.height;
canvas.width = 800;
canvas.height = 600;
Also, the squareVertexPositionBuffer is not defined, so I fixed it like this:
var triangleVertexPositionBuffer;
var squareVertexPositionBuffer;
function initBuffers() {
triangleVertexPositionBuffer = gl.createBuffer();
squareVertexPositionBuffer = gl.createBuffer();
}
Works with no problem in FF after that. IMHO, it looks better than in chrome, the blur seems smoother, but it's purely subjective.