[BUG] Under the full screen, the virtual joystick partially fails

[slmholder]

const managerDirection = nipplejs.create({
zone: this.direction,
mode: 'static',
position: { left: '50%', top: '50%' },
color: 'white',
})
managerDirection.on('end', (evt, data) => {
this.props.moveEnd()
})
managerDirection.on('move', (evt, data) => {
if (!data.direction) return
let speed
switch (data.direction.angle) {
case 'left': speed = Math.abs(data.vector.x * 0.1).toFixed(2); break;
case 'right': speed = Math.abs(data.vector.x * 0.1).toFixed(2); break;
case 'down': speed = Math.abs(data.vector.y * 0.1).toFixed(2); break;
case 'up': speed = Math.abs(data.vector.y * 0.1).toFixed(2); break;
}
this.props.moveStart(data.direction.angle, speed)
})

const managerPerspective = nipplejs.create({
  zone: this.perspective,
  mode: 'static',
  position: { left: '50%', top: '50%' },
  color: 'white',
})
managerPerspective.on('end', (evt, data) => {
  this.props.angleEnd()
})
managerPerspective.on('move', (evt, data) => {
  const x = Math.round(data.vector.x * 400)
  const y = Math.round(data.vector.y * -400)
  this.props.angleStart(x, y)
})

When operating one of the two virtual joysticks in a full-screen Android browser, the other one fails.

How to modify or improve it?

Thank you