Should paddings affect rendering buffer size?

ycw · March 26, 2020, 4:51pm

Given

<canvas 
  width='100' height='100' 
  style='padding:100px' 
></canvas>

Expected

engine.getRenderWidth() // 100

Actual

engine.getRenderWidth() // 300

CSS paddings is just a deco, it should not interfere with buffer size, right?

Deltakosh · March 26, 2020, 6:04pm

The engine is using the clientREct to get the size of the buffer:

github.com

BabylonJS/Babylon.js/blob/master/src/Engines/thinEngine.ts#L1216


}



/**

 * Resize the view according to the canvas' size

 */

public resize(): void {

    let width: number;

    let height: number;



    if (DomManagement.IsWindowObjectExist()) {

        width = this._renderingCanvas ? this._renderingCanvas.clientWidth : window.innerWidth;

        height = this._renderingCanvas ? this._renderingCanvas.clientHeight : window.innerHeight;

    } else {

        width = this._renderingCanvas ? this._renderingCanvas.width : 100;

        height = this._renderingCanvas ? this._renderingCanvas.height : 100;

    }



    this.setSize(width / this._hardwareScalingLevel, height / this._hardwareScalingLevel);

}



/**

ycw · March 26, 2020, 6:09pm

yes, here’s the problem, .clientWidth includes paddings!

ycw · March 26, 2020, 6:21pm

Imagine that window .innerWidth is 1000px
canvas is 50vw wide (=500px), with paddings 25vw (=250px each)

canvas.clientWidth // 1000 (paddings included)
engine.getRenderWidth() // 1000  (paddings included)

Is it expected, or a mis-calc?
(I expected that render width should be 500px)

Deltakosh · March 26, 2020, 6:31pm

It is expected…Since the origin of babylon.js (7 years ago) ;D