CSS box-sizing: border-box introduces unwanted behavior

Hi everybody,

when embedding one of my patches into a page I’ve noticed a rather peculiar behavior when the canvas has box-sizing: border-box; -> The canvas will continually shrink one pixel at a time.

I assume cables.gl measures the dimensions and finds it 1px larger in both dimensions than it expects, which causes it to resize the canvas. Just a guess based on the observed behavior.

An easy way to recreate the problem is embedding a patch that is not full-screen (glCanvasResizeToWindow: false), styling the canvas with a 1px border and box-sizing: border-box; and just watch it magically and gradually shrink to nothing.

My workaround right now is to specifically style the canvas with box-sizing: content-box overriding our HTML reset styles.

– lastfuture