Adobe Animate CC "responsive" scaling is breaking mouse events

[lannymcnie]

Recent changes in Adobe Animate HTML export for "responsive" support include CSS scaling, which are known to cause issues with MouseEvent coordinates, which do not account for CSS transformations of the canvas.

Here is the offending code from the HTML template:

function makeResponsive(isResp, respDim, isScale, scaleType) {      
    var lastW, lastH, lastS=1;      
    window.addEventListener('resize', resizeCanvas);        
    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);              
            }           
        }           
        canvas.width = w*pRatio*sRatio;         
        canvas.height = h*pRatio*sRatio;
        canvas.style.width = preloaderDiv.style.width = w*sRatio+'px';              
        canvas.style.height = preloaderDiv.style.height = h*sRatio+'px';
        stage.scaleX = pRatio*sRatio;           
        stage.scaleY = pRatio*sRatio;           
        lastW = iw; lastH = ih; lastS = sRatio;     
    }
}
makeResponsive(false,'both',false,1);   

This bug is logged to both track the issue so it can be raised with Adobe, but also to let people who run into this issue find an explanation. Ideally someone from the CreateJS team, or someone who has run into this issue can post more details, or a workaround in this thread.

Related issues:

• Mouse events have wrong position afters canvas is transformed #772 overview of CSS issue
• Firefox Problem with evt.nativeEvent.x #816 report of using native events to get around it
• Stage.mouseX/Y does not reflect stage transform. #477