ASP.net Bootstrap 4 Navbar Input Caret Issue iOS only

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>

is there "overflow: scroll" on any elements/wrapper divs? Cause i read about some bug on github forum. https://github.com/uswds/uswds/issues/277 — UnpassableWizard, Mar 20 '18 at 18:54
Thank you! It wasn't an overflow scroll issue on the navbar but there was a solution on that page by setting html & body height to 100% and having overflow auto. I've updated my question with the answer. — ScottC, Mar 21 '18 at 13:15

score 1 · Accepted Answer · answered Mar 28 '18 at 08:05

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

ASP.net Bootstrap 4 Navbar Input Caret Issue iOS only

1 Answers1