diff --git a/jssrc/soft_keyboard.js b/jssrc/soft_keyboard.js index 4058379..7a22183 100644 --- a/jssrc/soft_keyboard.js +++ b/jssrc/soft_keyboard.js @@ -7,7 +7,7 @@ window.initSoftKeyboard = function (screen) { let updateInputPosition = function () { if (!keyboardOpen) return - let [x, y] = screen.gridToScreen(screen.cursor.x, screen.cursor.y) + let [x, y] = screen.gridToScreen(screen.cursor.x, screen.cursor.y, true) input.style.transform = `translate(${x}px, ${y}px)` } diff --git a/jssrc/term_screen.js b/jssrc/term_screen.js index c798e4a..bef3f4b 100644 --- a/jssrc/term_screen.js +++ b/jssrc/term_screen.js @@ -108,6 +108,9 @@ window.TermScreen = class TermScreen { graphics: 0 } + // scaling caused by fitIntoWidth/fitIntoHeight + this._windowScale = 1 + // properties of this.window that require updating size and redrawing this.windowState = { width: 0, @@ -562,6 +565,9 @@ window.TermScreen = class TermScreen { realHeight = fitIntoHeight } + // store new window scale + this._windowScale = realWidth / (width * cellSize.width) + this.canvas.width = width * devicePixelRatio * cellSize.width this.canvas.style.width = `${realWidth}px` this.canvas.height = height * devicePixelRatio * cellSize.height @@ -710,12 +716,13 @@ window.TermScreen = class TermScreen { * Converts grid coordinates to screen coordinates. * @param {number} x - x in cells * @param {number} y - y in cells + * @param {boolean} [withScale] - when true, will apply window scale * @returns {number[]} a tuple of (x, y) in pixels */ - gridToScreen (x, y) { + gridToScreen (x, y, withScale = false) { let cellSize = this.getCellSize() - return [x * cellSize.width, y * cellSize.height] + return [x * cellSize.width, y * cellSize.height].map(v => withScale ? v * this._windowScale : v) } /** diff --git a/sass/pages/_term.scss b/sass/pages/_term.scss index c53298f..5136ff2 100755 --- a/sass/pages/_term.scss +++ b/sass/pages/_term.scss @@ -49,6 +49,10 @@ body.term { caret-color: transparent; color: transparent; @include click-through; + + // iOS Safari still shows a caret regardless of the above, so set the font + // size as small as it can be (will show up as a blinking blue pixel) + font-size: 1px; } #touch-select-menu {