Anyway, I've discovered the source of the problem. When you resize the browser window, a function in the HTML that Animate publishes gets called. This function always sets the width and height attribute of the canvas element, even when it hasn't changed. But surprise, setting the width or height of an element makes browsers consider that element to have been resized, even when the size hasn't changed. This wouldn't be a problem, except that resizing a canvas element clears its contents. So the canvas content disappears until CreateJS's next scheduled redraw. It's a perfect storm of unintuitive behaviors.
Here's my suggested fix. In the HTML that Animate publishes, there's a function called makeResponsive. It starts after the line "//Code to support hidpi screens and responsive scaling." and ends right before "makeResponsive(true, "both", false, 1);" (or similar). Replace that function definition with this code:
function makeResponsive(isResp, respDim, isScale, scaleType) {
var lastW, lastH, lastS = 1;
window.addEventListener("resize", window.requestAnimationFrame ? resizeCanvasReq : resizeCanvas);
resizeCanvas();
function resizeCanvasReq() {
window.requestAnimationFrame(resizeCanvas);
}
function resizeCanvas() {
var w = lib.properties.width, h = lib.properties.height;
var iw = window.innerWidth, ih = window.innerHeight;
var pRatio = window.devicePixelRatio || 1, xRatio = iw / w, yRatio = ih / h, sRatio = 1;
if (isResp) {
if ((respDim === "width" && lastW === iw) || (respDim === "height" && lastH === ih)) {
sRatio = lastS;
}
else if (!isScale) {
if (iw < w || ih < h) {
sRatio = Math.min(xRatio, yRatio);
}
}
else if (scaleType === 1) {
sRatio = Math.min(xRatio, yRatio);
}
else if (scaleType === 2) {
sRatio = Math.max(xRatio, yRatio);
}
}
if (iw !== lastW || ih !== lastH) {
canvas.width = w * pRatio * sRatio;
canvas.height = h * pRatio * sRatio;
canvas.style.width = dom_overlay_container.style.width = anim_container.style.width = w * sRatio + "px";
canvas.style.height = anim_container.style.height = dom_overlay_container.style.height = h * sRatio + "px";
stage.scaleX = pRatio * sRatio;
stage.scaleY = pRatio * sRatio;
stage.update();
}
lastW = iw; lastH = ih; lastS = sRatio;
}
}
This makes three major tweaks to Adobe's code.
- It pipes the window resize event through requestAnimationFrame instead of calling resizeCanvas directly. This ensures the resize code isn't executed more often than once per window redraw.
- It only resizes the canvas when its size has actually changed, eliminating needless redraws.
- When the canvas is resized, it tells CreateJS to immediately redraw the stage, minimizing flicker.
Tested in desktop IE11, Firefox, and Chrome. Seems to work okay.
1 Correct answer
10
Replies
AdChoices