iOS Cordova点击HTML SELECT列表报[LayoutConstraints]约束冲突错误

问题根因定位 #

• 核心问题1：你使用的<option>标签仅设置了label属性，没有填充内部文本内容，iOS WebView渲染原生选择器时优先读取option内部文本而非label属性，文本为空就会导致选择器内容空白。
• 核心问题2：日志中_UIToolbarContentView:0x7fbbcd65a540.height == 0的约束冲突，属于低版本Cordova iOS平台和WKWebView在iOS14+系统上的已知适配问题。

解决方案 #

按优先级依次测试以下方案即可：

1. 修复option标签写法 #

直接修改option结构，同时保留label属性和内部文本，修改后的DOM如下：

<select id="formControl12" class="form-control">
  <option label="3" value="3">3</option>
  <option label="4" value="4">4</option>
  <option label="5" value="5">5</option>
  <option label="6" value="6">6</option>
</select>

90%以上的同类空option导致的iOS选择器空白问题都可以通过这个方法解决。

2. 升级Cordova iOS平台版本 #

如果修改option后问题仍存在，先升级低版本的cordova-ios到最新稳定版：

cordova platform rm ios
cordova platform add ios@latest

升级后在项目config.xml的ios平台配置块中添加以下适配参数：

<preference name="WKWebViewConfigurationAdjustment" value="no" />
<preference name="SuppressesIncrementalRendering" value="true" />

3. 兜底兼容方案 #

如果上述方案都不生效，可以直接使用JS模拟的移动端选择器组件替代原生select，完全避开iOS原生选择器的适配问题。

验证步骤 #

修改完成后先清空Xcode构建缓存：打开Xcode点击Product > Clean Build Folder，再重新执行cordova build ios构建运行即可。

内容的提问来源于stack exchange，提问作者Eric Pabst