Stage zoom not updated when non-crafty DOM changes

[proyb6]

I could click a sprite to change to next frame and revert when mouse click release. After applying using zoomOut() to scale smaller than 100%, I found the mouse click still response to the same width and height 28px x 99px instead of smaller sprite sized if we do not use Crafty build-in zoom method.

function zoomOut(){
document.body.style.zoom=.96;this.blur();
}

Crafty.sprite(1, "button.png", {
btnup : [ 0, 0, 28, 99 ],
btndown : [ 28, 0, 28, 99 ]
});

Crafty.e("2D, DOM, Mouse, btnup").sprite(0,0).attr({x:(i*28), y:0})
.bind('MouseDown', function(e){this.sprite(28,0);})
.bind('MouseUp', function(e){this.sprite(0,0);})
.bind('MouseOut', function(e){this.sprite(0,0);})

[kevinsimper]

@proyb6 What happends if you use the built in zoom function? :)

[proyb6]

It working using built-in but there will be some use case where some project may be using pure javascript especially Electron e.g. if Macbook Pro Retina desktop are too big, I guess some will adjust zooming and certainly, Crafty.js should have the ability to detect external dimensions and reflect change automatically through a polling method and those that resize window screen automatically?

[kevinsimper]

It is not easy per say, somebody is talking about how to solve it here http://stackoverflow.com/questions/19235866/canvas-at-native-resolution-despite-zooming-retina

[mucaho]

This sounds similar to #452. However, Crafty.viewport.reload() does not fix the click area for me.

Example (works only in firefox):

Crafty.init();

Crafty.e("2D, DOM, Color, Mouse, WiredHitBox")
      .color('red')
      .attr({w: 100, h: 100})
      .bind('MouseDown', function(e){console.log("mouse")});

setTimeout(function(){
  document.body.style.MozTransform = "scale(0.5)";
  Crafty.viewport.reload();
}, 3000);