ASP.net Bootstrap 4 Navbar Input Caret Issue iOS only - ios

Question

I'm building a Bootstrap based website in ASP.net. I've come across something that I'm stuck on.
An input in a navbar isn't working (on IOS only). I've narrowed it down to being how the caret is positioned outside of the input field. Please see here where a solution is given for the exact same thing but in a modal.
Any idea on how to make that solution work in a navbar? The solution for modal is to make the modal body position fixed which won't work in the full webpage.
Here is what I see:
This is my navbar:
<nav class="navbar navbar-expand-md navbar-dark position-fixed bg-dark bottomnavbar" style="z-index: 1;">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<asp:Repeater ID="rpt_categories" runat="server">
<ItemTemplate>
<li class="nav-item" id="catNav_<%# Eval("id")%>">
<asp:LinkButton ID="lb_newsCat" runat="server" ToolTip='<%# Eval("category") %>' OnCommand="lb_newsCat_Command1" CommandName="naviTo" CommandArgument='<%# Eval("category") + ";" + Eval("id")%>' CssClass="nav-link" Text='<%# Eval("category") %>'></asp:LinkButton>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
<asp:TextBox ID="tb_Search" runat="server" type="search" CssClass="form-control" placeholder="Search"></asp:TextBox>
<asp:Button ID="btn_Search" runat="server" OnClick="btn_Search_Click" CssClass="btn btn-outline-success my-2 my-sm-0" Text="Submit" />
</div>
</nav>

Answer 1

The solution was in the source posted by #Rustyj
html, body {
-webkit-overflow-scrolling: touch !important;
overflow: auto !important;
height: 100% !important;
}
github.com/uswds/uswds/issues/277