Searchbar alignment incorrect on iOS Safari

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.



.searchbox {

<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 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 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>
      <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="">

Try this:

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

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

Do you have a live example?

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

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

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

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