Search bar issue on Chrome

[gempain]

Hello,

With Materialize v0.97.2, on Gooogle Chrome version 50.0.2661.102 (64-bit) for Mac OS X Yosemite 10.10.5, the search bar does not render correctly (screenshot taken straight from the official website):

Also, notice that on Safari 9.1, the search bar behaves strangely with the carret. When first focused, the carret fills 100% of the height, while when typing it fills half of the height. I think this comes from some line-height property somewhere.

First focus:

While typing:

This is not new. I had the same problem with Materialize v0.97.0.

If I succeed finding a workaround, I'll let you know.

All the best, and thanks for the amazing work !

[wedneyyuri]

I can confirm this. It's working for firefox v37 but not working for Chrome v50

[gempain]

@wedneyyuri Thanks for confirming. I just updated my post to add another issue I have found (it's not as bad as the other one, but worth mentioning I think).

[acburst]

This issue was fixed and merged c129dc1.

It will be public in the next release or you could download our latest version

[wedneyyuri]

@acburst Do you have plans about the next release date?

[gempain]

Awesome :) Thanks for the great work !

[giuliolastra]

As a temporary fix you can add this style:
.nav-wrapper, .nav-wrapper form, .nav-wrapper form .input-field{ height: 100%; }

[raphaelsoul]

the demo on the official website is not yet fixed.

[gempain]

I think it won't be until the next release.

[fega]

Working in the latest version

[bjarn]

This issue still persists in the latest 1.0 alpha release. Same behaviour as above.

[SmailyCarrilho]

This issue still happens on chrome and firefox in version 1.0.0-beta.

[acburst]

@SmailyCarrilho If you can provide a working codepen that reproduces this issue on the beta, please open a new issue with the codepen link

[hrajpal96]

This is a very strange issue that I'm facing on Chrome on Android.

[JavaDevilNZ]

Still seems to be broken on chrome. Looks fine on firefox.

Codepen example

I can fix this by adding this css

.input-field input[type=search]{ height: 64px !important; }