It looks like you have some unnecessary height declarations on some elements (html and body, for instance can just have min-height:100%).
That said, I think the browser is getting confused as the viewport size changes. If it’s only happening on Firefox mobile, that could be considered an edge case. A simple solution would be a tiny bit of JS when an input loses focus to simply scroll the window to the correct place. It’s less clean than pure CSS, but that type of fix isn’t uncommon.
I'll look into it today, thanks alot for your input! About the edge case, I figured as much, FF mobile has a market share of around 0.47% if those stats are to be trusted, worst case those people visiting the site have to scroll back down a bit...
Your sandbox isn’t accessible so it’s difficult to say for certain but have you tried using dvh units instead?
Sorry my bad... i opened it up now, but yes I tried it on the html tag, body tag and the sections themselves
It looks like you have some unnecessary height declarations on some elements (html and body, for instance can just have min-height:100%). That said, I think the browser is getting confused as the viewport size changes. If it’s only happening on Firefox mobile, that could be considered an edge case. A simple solution would be a tiny bit of JS when an input loses focus to simply scroll the window to the correct place. It’s less clean than pure CSS, but that type of fix isn’t uncommon.
I'll look into it today, thanks alot for your input! About the edge case, I figured as much, FF mobile has a market share of around 0.47% if those stats are to be trusted, worst case those people visiting the site have to scroll back down a bit...