I am working on some javascript to display interactive crosswords on websites. All the versions I have seen online (for example the New York Times’) show their own keyboard on mobile devices but I would much prefer to use the one provided by the OS or browser.
So far, I have created an input element that I hide by moving it offscreen to the left. (Is there a better way? Neither display: none nor visibility: hidden display the keyboard on focus.) When the user clicks on a cell in the crossword, I focus the input element and the keyboard pops up. Unfortunately, Safari also scrolls vertically to center the text box. This happens even when I call input.focus({preventScroll: true}).
Scrolling back to the position of the cell results in unpleasant jitter. The best solution I have found so far is to vertically center the input element myself before calling focus but that seems very hacky. Is there a better way?
