ios – @capacitor-community/barcode-scanner wrongly calculate top on totally different iphones

I wish to construct BarCode scanner with @capacitor-community/barcode-scanner, On Android it seems to be completely high-quality, it calculate correct top of the display screen and put overlay button on the underside of the web page. With Iphones it does not work like that, every iphone exhibits button in different place, I examined it on iphone 8,11 and 13. On Iphone 8 button is seen on the underside however you possibly can see that it’s lower and it’s attainable to scroll down, on iphone11 it’s barely seen and on iphone13 it’s not seen in any respect. Anyone is aware of easy methods to set overlay button to be completely on the underside of the web page with out must scroll down?

{isScanningInProgress ? (
        <>
          <StyledStopScanBox>
            <Button shade="main" variant="contained" measurement="massive" onClick={stopScan}>
              Cease Scan
            </Button>
          </StyledStopScanBox>
        </>
      ) : (
...
)

const StyledStopScanBox = styled(Field)(({ theme }) => ({
  show: 'flex',
  flexDirection: 'row',
  alignItems: 'heart',
  justifyContent: 'heart',
  place: 'absolute',
  width: '100%',
  high: 'calc(100vh - 75px)',
  zIndex: 3,
  top: 75,
  backgroundColor: theme.palette.background.default
}));