Lightning-Combobox Dropdown List Showing Up Behind Other Elements When Displayed Within Screen Flow on Mobile

Question

I'm running into an issue with the lightning-combobox displaying the dropdown list underneath other fields/elements. So far we have only been able to reproduce this when the LWC is used within a screen flow and viewed on a mobile device. We have reproduced this within the iOS app (haven't tried Android).

As mentioned the options do display but the background seems to be transparent as you can see other elements within the screenflow below the combobox. I assumed this was an issue with the Z-index on the .slds-dropdown or .slds-listbox. I tried overriding the z-index via the CSS, but it didn't have any effect. Please see the image below.

This is in a Winter 22 sandbox, Salesforce for iOS v. 232.06.

I can reproduce this with the basic implementation of a lightning-combobox as pulled from the component library.

  <lightning-combobox
    name="progress"
    label="Test Combobox"
    value={value}
    placeholder="Select Progress"
    options={options}
    onchange={handleChange}
  ></lightning-combobox>
</template>

import { LightningElement } from "lwc";

export default class TestComboBox extends LightningElement {
  value = "inProgress";

  get options() {
    return [
      { label: "New", value: "new" },
      { label: "In Progress", value: "inProgress" },
      { label: "Finished", value: "finished" }
    ];
  }

  handleChange(event) {
    this.value = event.detail.value;
  }
}