Materialize: Search bar misaligned in webkit

[kfarwell]

gecko

webkit and IE11

http://codepen.io/anon/pen/MaXqjL

<nav class="pink" role="navigation">
  <div class="nav-wrapper container">
    <a id="logo-container" href="/" class="brand-logo black-text">
      <img src="/img/logo.png" alt="title" />
      <span>title</span>
    </a>
    <ul class="right"><li>
      <form action="/search" method="post">
        <div class="input-field">
          <input id="search" name="search" type="search" placeholder="Search tags..." required>
          <label for="search"><i class="material-icons black-text">search</i></label>
        </div>
      </form>
    </li></ul>
  </div>
</nav>

[acburst]

hmm can't seem to recreate it. But try removing the UL and adding the right class directly onto the form.

<nav class="pink" role="navigation">
  <div class="nav-wrapper container">
    <a id="logo-container" href="/" class="brand-logo black-text">
      <img src="/img/logo.png" alt="title" />
      <span>title</span>
    </a>
    <form action="/search" method="post" class="right">
      <div class="input-field">
        <input id="search" name="search" type="search" placeholder="Search tags..." required>
        <label for="search"><i class="material-icons black-text">search</i></label>
      </div>
    </form>
  </div>
</nav>

[kfarwell]

@acburst No change in rendering.

hmm can't seem to recreate it.

The codepen has the issue in surf and Midori for me.

[keeferrourke]

+1 Can confirm that this is an issue in _some_ webkit browsers such as surf.
Others, such as Epiphany 3.18.5 under Gnome 3.18.4 display the search input a different kind of wrong.

There's a gray bar that displays underneath the input.

[fega]

@kfarwell @keeferrourke
Could you check if this is still an issue with the latest version?

[keeferrourke]

@fega I've made another code pen using the latest version of Materialize (v0.98.1) to demonstrate that this is still an issue. The second navbar uses the (ineffective) suggestion from @acburst. I use MDI icons in this example because (for whatever reason) the Materialize icons also don't render, and instead only display as text.

See http://codepen.io/anon/pen/pPvqQM?editors=1000

The rendering is still not what one would expect in the latest Chrome/Chromium, and the issue definitely persists.

[fega]

@keeferrouke thanks to take the time to test all of this stuff.

The icons issue could be a problem with the material icon project and the ligature support of the web browsers, but should be great to provide a fallback for compatibility

We will have in mind this issue, thanks again.

[keeferrourke]

Has this been solved? At this point... what is the correct markup to put a search-bar in the nav-bar?