Searchbar alignment incorrect on iOS Safari

Questions
1

My searchbar layout is correctly aligned vertically on desktop and Android. In iOS Safari though searchbar is not centered vertically. I tried to set vertical-align:middle but that had no effect.

Ideas?

searchbay

.searchbox {
  width:175px;
  vertical-align:middle;
}

<div class="navbar">
  <div class="navbar-inner">
    <div class="left">
      <div class="title">
        <i class="icon material-icons" style="display:inline;vertical-align:middle;">whatshot</i>
        <div style="display:inline;vertical-align:middle;font-size:24px;margin-left:-5px;">brighter</div>
      </div>
    </div>
    <div class="right">
      <form class="searchbar searchbar-inline searchbox" id="searchbar-offers" @submit="onSubmit">
        <div class="searchbar-input-wrap">
          <input type="search" placeholder="Search">
          <i class="searchbar-icon"></i>
          <span class="input-clear-button"></span>
        </div>
      </form>
      <div id="avatar-out">
          <a href="#" class="link icon-only panel-open" style="margin-right:5px;" data-panel="right">
            <i class="icon f7-icons ios-only" style="font-size:36px">person_round_fill</i>
            <i class="material-icons md-only" style="font-size:36px">account_circle</i>
          </a>
      </div>
      <div hidden id="avatar-in">
          <a href="#" class="link icon-only panel-open" style="margin-right:5px;" data-panel="right">
            <img id="user-pic" class="nav-avatar" src="">
          </a>
      </div>
    </div>
  </div>
</div>
2

Try this:

<div class="right display-flex align-items-center">
  ...
3

No luck with that in iOS Safari. It also is mis-aligned on the home screen app which uses a separate version of Safari (thanks to Apple :wink:

If I load the desktop site in iOS Safari the search box is aligned vertically

4

Do you have a live example?

5

Not currently. I’ll go set one up again. The code snippet above is complete for the section effecting the searchbar though.

6

Live example is good as it can be something else breaking it

7

https://brighter.me/sample

Just a blank container with the search bar in the top navbar. The alignment problem is there is iOS Safari and when placed on the homescreen

8

Add no-border class to form and --f7-searchbar-height:auto prop:

<form class="searchbar searchbar-inline searchbox no-border" id="searchbar-offers" @submit="onSubmit" style="--f7-searchbar-height: auto;">

Also check this website as cheatsheet on how to center things in CSS http://howtocenterincss.com