ios Cordova：出现错误“[LayoutConstraints] 无法同时满足约束。”当用户触摸 HTML SELECT 列表时

Question

我正在构建的应用程序中有一个 HTML SELECT 元素和一些选项。这是 DOM:

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

当我运行 “cordova build ios” 和运行它在 ios 设备模拟器上，并单击 select 列表时，我收到以下错误，导致我的应用无法在 ios 设备上使用：

2021-09-16 06:30:32.625254-0600 Future Balance[1035:28945] [LayoutConstraints] Unable to simultaneously satisfy constraints.
    Probably at least one of the constraints in the following list is one you don't want. 
    Try this: 
        (1) look at each constraint and try to figure out which you don't expect; 
        (2) find the code that added the unwanted constraint or constraints and fix it. 
    (Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints) 
(
    "<NSAutoresizingMaskLayoutConstraint:0x6000033c0730 h=--& v=--& _UIToolbarContentView:0x7fbbcd65a540.height == 0   (active)>",
    "<NSLayoutConstraint:0x6000033ad1d0 V:|-(0)-[_UIButtonBarStackView:0x7fbbcd610170]   (active, names: '|':_UIToolbarContentView:0x7fbbcd65a540 )>",
    "<NSLayoutConstraint:0x6000033ad220 _UIButtonBarStackView:0x7fbbcd610170.bottom == _UIToolbarContentView:0x7fbbcd65a540.bottom   (active)>",
    "<NSLayoutConstraint:0x6000033ddae0 UIButtonLabel:0x7fbbcd68ea30.centerY == _UIModernBarButton:0x7fbbcd47a0e0'Done'.centerY + 0.5   (active)>",
    "<NSLayoutConstraint:0x6000033dbde0 'TB_Baseline_Baseline' _UIModernBarButton:0x7fbbcd47a0e0'Done'.lastBaseline == UILayoutGuide:0x6000029d7aa0'UIViewLayoutMarginsGuide'.bottom   (active)>",
    "<NSLayoutConstraint:0x6000033dbe30 'TB_Top_Top' V:|-(>=0)-[_UIModernBarButton:0x7fbbcd47a0e0'Done']   (active, names: '|':_UIButtonBarButton:0x7fbbcd68c990 )>",
    "<NSLayoutConstraint:0x6000033d7de0 'UIButtonBar.maximumAlignmentSize' _UIButtonBarButton:0x7fbbcd68c990.height == UILayoutGuide:0x6000029d4700'UIViewLayoutMarginsGuide'.height   (active)>",
    "<NSLayoutConstraint:0x6000033acff0 'UIView-bottomMargin-guide-constraint' V:[UILayoutGuide:0x6000029d4700'UIViewLayoutMarginsGuide']-(0)-|   (active, names: '|':_UIButtonBarStackView:0x7fbbcd610170 )>",
    "<NSLayoutConstraint:0x6000033dbd40 'UIView-bottomMargin-guide-constraint' V:[UILayoutGuide:0x6000029d7aa0'UIViewLayoutMarginsGuide']-(16)-|   (active, names: '|':_UIButtonBarButton:0x7fbbcd68c990 )>",
    "<NSLayoutConstraint:0x6000033acf50 'UIView-topMargin-guide-constraint' V:|-(0)-[UILayoutGuide:0x6000029d4700'UIViewLayoutMarginsGuide']   (active, names: '|':_UIButtonBarStackView:0x7fbbcd610170 )>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x6000033ddae0 UIButtonLabel:0x7fbbcd68ea30.centerY == _UIModernBarButton:0x7fbbcd47a0e0'Done'.centerY + 0.5   (active)>

Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger.
The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKitCore/UIView.h> may also be helpful.

用户在屏幕底部看到 selector 但没有显示可供选择的选项：

这是用户在触摸之前看到的内容：

这是用户触摸后看到的内容：

我什至删除了我整个项目中的所有 CSS，这样剩下的就是浏览器/网络视图中内置的 CSS。问题依旧！

Answer 1

来自“breautek”：

Cordova 不会直接对 DOM 元素进行任何布局。这是 WebView 的职责，因此，您需要向 WebKit 提出问题。

但这并不是导致您在屏幕截图中看到的内容的原因。我创建了自己的复制应用程序并看到了您的屏幕截图和约束错误。你看不到列表项的原因（它们实际上没有标签存在）是因为你有无效的 DOM.

你应该有：

<!-- This is the correct <option> schema -->
<option value="1">1</option>

<!-- this is incorrect -->
<option label="1" value="1"></option>

label 属性在现代浏览器中有效，在 WKWebView 中无效。

ios Cordova：出现错误“[LayoutConstraints] 无法同时满足约束。”当用户触摸 HTML SELECT 列表时

ios Cordova: Getting error "[LayoutConstraints] Unable to simultaneously satisfy constraints." when user touches HTML SELECT list

html

ios

cordova