@capacitor-community/barcode-scanner wrongly calculate height on different iphones

Question

I want to build BarCode scanner with @capacitor-community/barcode-scanner, On Android it looks totally fine, it calculate proper height of the screen and put overlay button on the bottom of the page. With Iphones it doesn't work like that, each iphone shows button in other place, I tested it on iphone 8,11 and 13. On Iphone 8 button is visible on the bottom but you can see that it is cut and it is possible to scroll down, on iphone11 it is barely visible and on iphone13 it is not visible at all. Anybody knows how to set overlay button to be totally on the bottom of the page without need to scroll down?

{isScanningInProgress ? (
        <>
          <StyledStopScanBox>
            <Button color="primary" variant="contained" size="large" onClick={stopScan}>
              Stop Scan
            </Button>
          </StyledStopScanBox>
        </>
      ) : (
...
)

const StyledStopScanBox = styled(Box)(({ theme }) => ({
  display: 'flex',
  flexDirection: 'row',
  alignItems: 'center',
  justifyContent: 'center',
  position: 'absolute',
  width: '100%',
  top: 'calc(100vh - 75px)',
  zIndex: 3,
  height: 75,
  backgroundColor: theme.palette.background.default
}));