diff --git a/html/js/render/spGameRenderer.js b/html/js/render/spGameRenderer.js index 7f47456..3ed2cb6 100644 --- a/html/js/render/spGameRenderer.js +++ b/html/js/render/spGameRenderer.js @@ -26,9 +26,10 @@ if (!host) { host = doc().createElement('div'); host.id = 'rk-game-host'; - host.style.cssText = 'display:none; position:relative; width:100%; max-width:900px;' + - ' aspect-ratio:16/10; margin:0 auto; overflow:hidden; background:#0a0c0f;' + - ' border:1px solid #2a313a; border-radius:6px; touch-action:none; cursor:grab;'; + // Absolutely FILL #game-display (which is position:relative) so the flex centering + the + // hidden ROT/FX sibling canvases can't shrink or shove us into a corner. + host.style.cssText = 'display:none; position:absolute; top:0; left:0; right:0; bottom:0;' + + ' overflow:hidden; background:#0a0c0f; z-index:6; touch-action:none; cursor:grab;'; gd.appendChild(host); } return host; @@ -76,7 +77,9 @@ if (SP._renderer && SP._renderer.canvas) { var c = SP._renderer.canvas; c.style.position = 'absolute'; c.style.top = '0'; c.style.left = '0'; - c.style.maxWidth = 'none'; c.style.imageRendering = 'pixelated'; + // Beat `.rotdis canvas { max-width:100% !important }` so the camera controls the size. + c.style.setProperty('max-width', 'none', 'important'); + c.style.setProperty('image-rendering', 'pixelated', 'important'); } if (!host._rkZoomBound) { host._rkZoomBound = true;