HTML5：Boostrap和Datalist Polyfill Library冲突

Question

我正在使用polyfill datalist JS library让iPad能够在用户输入输入字段中的字符时使用自动搜索功能。这是原始的HTML：

QRegion

当我运行HTML页面时，列表会显示在页面顶部。以下是我iPad上的截图。

当我删除<div class="col-xs-12"> <input type="text" id="inp_provider" placeholder="Provider" required list="provider_data"/> <!--[if lte IE 9]><select data-datalist="provider_data"><![endif]--> <datalist id="provider_data"> <option value="Bruce Banner"/> <option value = "Reed Richers"/> </datalist> <!--[if lte IE 9]></select><![endif]--> 和<div class="col-xs-12">时，列表会正确显示（在输入字段的底部应该是它）。

可以找到运行的JavaScript here。这是多边形填充数据列表的CSS。

</div>

如何解决此问题？我不知道从哪里开始解决这个问题？ 设备信息：iPad 2 iOS版本：9.2（13C75） Chrome 57.0.2987.100