Bootstrap FormGroup/ Input is not fully visible (Half hidden by some layers) only in IOS

I am working on a form group that has an input with bootstrap, it works fine in all the desktop platforms, as well as in Android, but for some weird reasons, it's not fully showing or only showing a half-hidden input field, check the images below.

Android (Works just fine)

This how it is showing in IOS (Issue)

This is the written code responsible for that output.

<div className="form-group search-div">
          <form className='form' ref={form} onSubmit={handleSearch}>
            <button className="search-button" >
              <div className="search-icon">
                <span >{SEARCH_ICON}</span>
              </div>
            </button>
            <input
              type="search"
              className="search-input"
              name="searcText"
              value={searchText}
              onChange={onChangeUsername}
              placeholder="Search"
              aria-label="Search"
              aria-describedby="search-addon" />
          </form>
        </div>

CSS

.search-input {
  /* position: inherit; */
  width: calc(100% - 50px);
  height: 18px;
  /* left: 45px; */
  /* top: -35px; */

  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 18px;
  border: 0px;
  outline: 0px;
  background-color: #FFFFFF !important;
}

Simply don't know what to do here, any inputs if anyone has already worked with similar problem?