Hi,
Sorry for the late reply.
The purpose of kokopu-focusFieldContainer is to capture the keyboard events, to allow navigate between moves using the keyboard arrows. It is styled with:

.kokopu-focusFieldContainer {
	position: fixed;
	bottom: 0px;
	right: 0px;
	width: 0px;
	height: 0px;
	overflow: hidden;
}

... thus is not visible, and since it is rendered out of the normal document flow (thanks to position: fixed), having it being focused should not trigger page scroll.

I've no iOS device, so I cannot test by myself unfortunately. But what I would test first is to make the kokopu-focusFieldContainer visible (with for instance .kokopu-focusFieldContainer { width: 50px; height: 50px; background-color: red; }, check that it is actually rendered in the top left corner, and whether the problem is still reproducible in these conditions.

By the way, I'm opened to any solution allowing to capture the keyboard events without the need for this ugly hidden field. ;-)

PS: you may have already notice it, but the problem arise in lib, and the problem may be easier to analyze by following the code in the kokopu-react repository (see file src/Movetext.js in particular).

OK - that makes things a bit more clear. Maybe a stupid question, but why does the field need to be in focus?
I'm asking because, unless I'm overlooking something, I see literally zero difference in application behaviour when I prevent focus, e.g. commenting out in Chessgame.js the focus command:

handleNavClicked(game, selection, nodeIdProvider, withMove) {
  // this.movetextRef.current.focus();
  let nodeId = nodeIdProvider(game, selection ? selection : 'start');
  if (nodeId) {
    this.setState({ selection: nodeId, withMove: withMove });
  }
}

handleFlipClicked() {
  // this.movetextRef.current.focus();
  this.setState({ withAdditionalFlip: !this.state.withAdditionalFlip });
}

And for obvious reasons, this does solve the page jump in iOS

setting the position style to 'absolute' solves the issue, without commenting out any focus commands.
In the compiled react lib, adding this to the kokopu-focusField works:

style: {position:'absolute'},

Alternatively, specifying position:absolute in a custom stylesheet also resolves this issue:

a.kokopu-focusField{
  position: absolute;
}

I will go for this last option as a quick fix already.

Does it seem OK for you to modify the code to solve this issue natively?
Credits for the inspiration: https://dansajin.com/2012/12/07/fix-position-fixed/

I'm testing the solution with .kokopu-focusField { position: absolute; } and it looks OK. Amazingly, the solution is then to have an .kokopu-focusField element with position: abolute within a .kokopu-focusFieldContainer with position: fixed... HTML is sometimes such a mess...

Anyway, thank you for your search for a solution. I'll patch the kokopu-react lib accordingly (or you can also propose a pull request in https://github.com/yo35/kokopu-react).

Just for the record, removing this.movetextRef.current.focus(); in handleNavClicked(..) breaks the following workflow:

1. Display a chessgame.
2. Click on the button arrow below the navigation board.
3. Press key or on the keyboard => the expected behavior here is that the keyboard arrow keys allows to navigate between the moves.

Without this.movetextRef.current.focus(); in handleNavClicked(..), this does not work anymore, since the kokopu-focusField does not have the focus.

The new version of RPB Chessboard with your fix is available. Thanks again.