Dropdown causes mobile layout issue on iphone

To reproduce:

Start with a basic CRA, do not eject.

Install semantic-ui-css and semantic-ui-react. My app has the following in addition to the default react packages:

dependencies:
    "axios": "^0.21.1",
    "install": "^0.13.0",
    "moment": "^2.29.1",
    "npm": "^7.5.6",
    "semantic-ui-css": "^2.4.1",
    "semantic-ui-react": "^2.0.3"
devDependencies:
    "eslint": "^7.20.0",
    "eslint-plugin-jsx-a11y": "^6.4.1"

Do not import any css other than semantic-ui-css.

Add a Nav component:

 <Menu fixed="top" inverted>
      <Container fluid>
        <Menu.Item header>
          <Icon name="university" color="olive" size="big" />
          <p>React App</p>
        </Menu.Item>
      </Container>
    </Menu>

Add footer:

     <Menu fixed="bottom" className="ui fluid three item menu">
        <Menu.Item>
          <p>copyright 2021</p>
        </Menu.Item>
      </Menu>

Add a component that includes the following between header and footer - problem starts here:

const regions = [{
    "id": "MywTm4_IEp2XZtAfPKRGg",
    "region": "Asia",
    "subregions": [
      "Southern Asia",
      "Western Asia",
      "South-Eastern Asia",
      "Eastern Asia",
      "Central Asia"
    ]
  },
  {
    "id": "qxmsAgkNwgqb5xqff-ddc",
    "region": "Europe",
    "subregions": [
      "Northern Europe",
      "Southern Europe",
      "Western Europe",
      "Eastern Europe"
    ]
  }]

  const selectRegions = regions.map((r) => {
    const select = new Object({ key: r.id, value: r.region, text: r.region })
    return select
  })

  const handleChange = (e, { value }) => {
    setRegion(value)
  }

<>
      <Dropdown
        onChange={handleChange}
        options={selectRegions}
        value={region}
        deburr
        search
      />
      {JSON.stringify(region)}
</>

Run the app, and open a browser on a mobile device - on an iPhone - using local-IP:port. I tested with my iPhone 11 max pro ios 14.4.1, both safari and chrome, and also tested a volunteer's android, I don't know what version. The android did not have any display issues.

Expected Result

Mobile (ios) layout should not change after adding the Dropdown component.

Actual Result

Mobile layout changes from normal scroll behavior, which is not scrolling at all in any direction, to behaving as if the page size is much wider, scrolling horizontally a significant amount.

None of the other semantic-ui components cause this issue, as far as I can tell. I have used almost all of them, I think. I have another finished, published app that does not use the semantic-ui dropdown, and it renders nicely on ios.

Version

"semantic-ui-css": "^2.4.1", "semantic-ui-react": "^2.0.3"

Testcase

I don't think codepen would reproduce the issue on mobile. A side note, I had previously been using chrome devtools only, on desktop, to preview and check for responsiveness, but it did not display any rendering issues at any size.

I thoroughly inspected the rendered elements on desktop in devtools, looking for any small discrepancies in window or component size, margins, padding, etc., with and without the dropdown, but I could not find any.

iPhone scroll

Semantic-Org / Semantic-UI-React