jquery下拉列表和文本框在ios chrome浏览器上不起作用

我有一个非常基本的搜索页面,有下拉列表和文本框。

代码片段如下

<div class="container" style="width: 100%;">
   <div class="row">
        <div class="input-group col-sm-4 col-md-4" style="float: left; margin-bottom: 10px; max-width:0px;">
           <span class="input-group-addon" id="basic-addon2">Business Name</span>
           @Html.LabelFor(m => m.Parameters.BusinessName, new { style = "display: none;" }) 
           @Html.TextBoxFor(m => m.Parameters.BusinessName, new { @maxlength = 50, @class = "form-control", @placeholder = "Enter a business name", @aria_describedby = "basic-addon2", @style = "width:350px;" })
        </div>

        <div class="input-group col-sm-4 col-md-4" style="float: left; margin-bottom: 10px; max-width:0px;">
           @Html.LabelFor(m => m.Parameters.BusinessNameSearchType, new { style = "display: none;" }) @Html.DropDownListFor(m => m.Parameters.BusinessNameSearchType, searchtypes, new { @class = "form-control", @style = "width:150px;" })
        </div>
   </div>
</div>

我使用bootstrap 3.3.5和jQuery 2.1.4。

当我使用Chrome作为浏览器时,它在桌面、android平板电脑和android手机上运行得非常好。

然而,当我尝试在新版iPhone ios浏览器上查看时,文本框和下拉框都会完全崩溃(崩溃为完全不可用)。

有趣的是,当我试图在Chrome中模仿iPhone X时,它也运行得很好。

我对整个ios主题都是全新的。做一些基础研究使我相信旧版本的bootstrap/jquery可能是问题所在。

尝试更新到bootstrap 4,这也导致将jquery更新到3.0.0,完全破坏了整个应用程序,所以我不得不将其还原回来。

在我深入讨论整个bootstrap/jquery之前,有谁能给我提供一些有用的提示,告诉我为什么ios如此挑剔?在我开始研究可能的解决方案之前,我想至少对问题有一个基本的了解。