wrong selection origin in chrome

[Anisotropic]

In chrome 36 try load demo, doing some zoomin, then hit f12 - developers panel opens, do some mousewheel tap to bottom of page. And now click and drag over canvas = selection are drawing higher then must be.

[Raggaer]

Happens also on Windows Edge and on Firefox...

Any solution?

[slow-loris]

Same issue here. Even in the Demo.

[deenfoxx]

I did not see it mentioned anywhere else, but the selection origin is wrong simply by scrolling the page down on the browser. Apparently selection is based on absolute positioning instead of relative positioning of the <canvas>.

Is there a solution, or just turn scrolling off?

You can duplicate this on the DEMO by adjusting the browser height to be shorter than the canvas, then scrolling down a little, then try and select the object.

Perhaps related... I am interested in knowing how to force the fabric-viewport canvas to always fill absolute 100% height and width (dynamic when browser is resized) and thus avoid the scrolling problem. Any suggestions?

[dBiazioli]

@deenfoxx I had the same issue, and fixed by using pageX/pageY instead of clientX/clientY in the transformEventParams function. This is the working code:

Viewport.prototype._transformEventParams = function (e) {
    var offsetLeft, offsetTop;
    offsetTop = this.canvas.wrapperEl.getBoundingClientRect().top;
    offsetLeft = this.canvas.wrapperEl.getBoundingClientRect().left;
    return {
        which: 1,
        shiftKey: e.shiftKey, //This fixes the multiple selection while pressing shift
        clientX: (e.pageX - offsetLeft) / this.zoom + offsetLeft - this.translate().x, //Using e.pageX instead of e.clientX
        clientY: (e.pageY - offsetTop) / this.zoom + offsetTop - this.translate().y,//Using e.pageY instead of e.clientY
        pageX: e.pageX - this.translate().x,
        pageY: e.pageY - this.translate().y,
        screenX: e.screenX - this.translate().x,
        screenY: e.screenY - this.translate().y
    };
};