resize: 'fullscreen' regression

[Jhey Tompkins]

Since ~1.0.1 there may have been a regression in how resize: 'fullscreen' works.

My pens for Zdog previously resized to the window as expected. However, the newest version makes the canvas much bigger than the actual viewport available on mobile devices. Also, it's almost like if the viewport is a certain size, Zdog goes into a loop of trying to resize itself.

Test case: For example; try this pen https://codepen.io/jh3y/pen/dEwOPe but setting the version to https://unpkg.com/zdog@1/dist/zdog.dist.min.js. The canvas becomes larger than the viewport on smaller devices/screens. To fix this I set the version explicitly to https://unpkg.com/zdog@1.0.1/dist/zdog.dist.min.js 🛠

[Jack Rugile]

I can confirm this regression here: https://codepen.io/desandro/pen/f2f29ebd5b910a83929dc756a67e9c46

On my 2x DPR laptop, I get the behavior described above by @jh3y. The canvas starts off bigger than the viewport, and then seems to loop into infinity and crash the tab on resize.

On my 1x DPR desktop, the canvas doesn't seem to resize at all.

[David DeSandro]

Thanks for reporting this issue.

To @jh3y's issue: This behavior is intended. I've added this copy to the Zdog resize fullscreen docs

.zdog-canvas {
  width: 100%;
  height: 100%;
}

For , set 100% width and height CSS on the canvas. Zdog will scale up the canvas to match device pixel ratio. 100% width and height then scales the element back down, thus providing higher pixel density.

---

For @jackrugile Looks like that demo was busted. It's a hack to show that you could use resize: true and scale a Zdog canvas to match viewport height, rather than width. I've fixed the demo, should be good now. For future reference, please use the standard canvas resize demo.

[Chris Gannon]

Hey @desandro - you posted a local Zdog resize link above http://local/zdog-docs/build/api#illustration-resize

[Jhey Tompkins]

Think this one can be closed now

Since using

canvas {
  height: 100vh;
  width: 100vw;
}

I've seen no issues with resize: 'fullscreen' 👍