While designing a website using materializecss, everything was going smoothly in Firefox until I decided to check it in Chrome.
Surprisingly, the search bar seems to be the only issue. I followed the navbar instructions from the documentation, so I don't think there is anything wrong with the code since it works perfectly fine in Firefox.
Firefox Screenshot:
https://i.sstatic.net/kbN8d.png
Chrome Screenshot:
https://i.sstatic.net/wZFpF.png
HTML code:
<form class="hide-on-med-and-down">
<div class="input-field">
<input id="search" type="search" required>
<label class="label-icon" for="search"><i class="material-icons">search</i></label>
<i class="material-icons">close</i>
</div>
</form>
I even tried modifying the CSS of the search bar like this (I came across this solution while looking for a fix to a similar problem):
nav .nav-wrapper form, nav .nav-wrapper form .input-field{
height: 100%;
}