iOS Safari virtual keyboard shifts html tag outside the screen

We are developing a slightly bigger solution using angular - and currently cordova for our native builds (we will change that soon).

In our App we have multiple Input fields. When focused the complete site automatically gets shiftet towards top to display the input field properly - that's the standard behavior of iOS/Safari as far as i am aware of.

Our Problem is that, sometimes, when we enter the input field the page gets shifted a bit too much towards the top. (the amount of shifting is completely random but always relatively small)
So if we leave the input the complete html-tag is slightly offset and there is a space between the bottom of the display and the html-tag itself.
The html-tag itself keeps it size, so its leaving the screen on the top-end.

I have added a red border to the html-tag to hopefully make it more clear:
how it should look (red border at the top is visible)
shiftet html bottom 1 (red border at the top is not visible anymore)
shiftet html bottom 2 (red border at the top is not visible anymore)

Basic html structure

<html>
  <head>
    ...
    <meta name="viewport" content="height=device-height, width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover, user-scalable=no">
    ...
  </head>
  <body>
    <app-root>
      <home-component>...</home-component>
    </app-root>
  </body>
</html>

css:

html {
  height: 100%;
  float: left;
  display: block;
  border: 2px solid red;
}

body, app-root {
  display: block;
}

home-component {
  display: flex;
  flex-direction: column;
  height: 100%;
  height: -webkit-fill-available;
}

If I add a margin-top to the HTML tag, I can slide it down far enough. If I set the margin-top to a negative number, the HTML tag will align itself correctly again.

I have tried several things now including absolut positioning, playing around with vh, px, %, etc. or the reworking of the whole html/css structure. Also i checked the meta viewport (see html snippet).
Perhaps I should add that we don't move or animate any elements via js or css and that scrolling is only allowed in certain components in our solution
On the android devices or as a pwa the app works flawless. So i think it must have something todo with the virtual keyboard of safari/ios.

This problem is driving me nuts ... i hope someone can help me or direct me into the right direction.

So this is my first question here on stackoverflow, so please dont tear me apart ;)