I have a simple script in my application that uses jQuery to change the width and height attributes of the canvas tag with the window resize event. This allows me to have a fluid width/height canvas tag in my application.
Everything works great in Firefox, but whenever I resize the window in Chrome the web page freezes. Does anybody know if this problem is limited to the Chrome browser, or if there is a way to achieve a fluid canvas that circumvents this error?
Here is the relevant code snippet:
$(window).resize(function() {
// Reset the canvas dimensions to zero so that the document collapses to the width and height of my other UI elements
$canvas.attr({
width:0,
height:0
});
// Now set the width and height attributes minus the space I need for other UI elements
$canvas.attr({
width:$(document).width()-250+"px",
height:$(document).height()-101+"px"
});
gl.viewportWidth = canvas.width;
gl.viewportHeight = canvas.height;
});
My code is architectured so that relevant portions of code (for perspective matrix and viewport) are done frame by frame at the moment. I may change this later to something more efficient.
Thanks in advance,
Jason Sage