HTML Входы не отображаются должным образом только на Iphone

Question

У меня есть несколько полей ввода на моем веб-сайте, которые правильно отображаются в компьютерных браузерах и на мобильных телефонах Android. Но когда я использую Iphone для доступа к этим входам, они показываются значительно отличающимися от оригинального css, созданного для них.

Это HTML КОД:

<div class="panelManageSearchOptions">
    <input id="panelManageSearchDiscussionsByDiscussiontitle" class="panelManageSearchInput" type="text" placeholder="חפש דיון לפי כותרת ">
    <input id="panelManageSearchDiscussionsByUsername" class="panelManageSearchInput" type="text" placeholder="חפש דיון לפי שם משתמש ">
</div>

Это CSS код:

  .panelSection .panelManageSearchOptions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
    -webkit-box-shadow: 0 2px 5px black;
            box-shadow: 0 2px 5px black;
    padding: 5px 8px; }
  .panelSection .panelManageSearchInput {
    border: 1px solid black;
    width: 100%;
    font-size: 14px;
    padding: 3px 6px;
    -webkit-box-shadow: 0 2px 2px #7F8084;
            box-shadow: 0 2px 2px #7F8084; }

Вот как эти входы отображаются в компьютерных \ android мобильных браузерах:

И это на Safari \ Chrome в моем Iphone XR: