Svh and lvh height not behaving as expected in Chrome on mobile

Hi guys! I have a flexed hero with two blocks inside. On mobile these get stacked and both get 50 lvh height.

The problem I have is with Chrome. When i scroll and the navbar animates these two 50 lvh blocks shrink with the navbar. As far as I understand svh or lvh viewport values this should not happen right? I don’t have this issue when viewing in Safari.

I made a video to illustrate the difference between Safari and Chrome and here is my read only link

Any advice on this would be great!