Menu icon Foundation
Foundation 5 Button/Input Style with Firefox Mobile broken

Firefox android foundation style bug

Hi 'Zurbians',

actually I am developing a web application using ( the really amazing ) foundation 5 as front end framework. At weekend I have performed some tests on a mobile device ( android ). If I will use the firefox web browser ( version 28.0.1 without any customisation ) the styles of input fields and buttons are not rendered correctly. As you can see ( the snapshot ), at the homepage of zurb foundation I will get the same behavior ( there is a gradient inside the button and shadows inside the input field ).

Is this a known issue? Or is there a way to fix it? What can I do? Will this problem be resolved with an upcoming version of foundation?

Kind regards!

stylefirefox mobile

Firefox android foundation style bug

Hi 'Zurbians',

actually I am developing a web application using ( the really amazing ) foundation 5 as front end framework. At weekend I have performed some tests on a mobile device ( android ). If I will use the firefox web browser ( version 28.0.1 without any customisation ) the styles of input fields and buttons are not rendered correctly. As you can see ( the snapshot ), at the homepage of zurb foundation I will get the same behavior ( there is a gradient inside the button and shadows inside the input field ).

Is this a known issue? Or is there a way to fix it? What can I do? Will this problem be resolved with an upcoming version of foundation?

Kind regards!

Rafi Benkual about 5 years ago

Thanks for the report. We tested them side by side and see no difference on desktop. We don't have a Firefox mobile browser to test right now, but we'll find one and take a look. Thanks.

Christian Thomas about 5 years ago

Hi, great. I'll be happy to hear, that you will take a closer look for it.

( firefox mobile provided by G play store: https://play.google.com/store/apps/details?id=org.mozilla.firefox )

It will be really cool, if you can write a reply again, if it will work. Thanks!

Jeff Horton about 5 years ago

This is an issue with the default button styling used in Firefox for Android - there is a discussion about it on the normalize github account https://github.com/necolas/normalize.css/issues/214.

adding background-image:none to _buttons.scss: @mixin button-base and _forms.scss: @mixin form-element seemed to improve things for me, so I hope that helps point your troubleshooting in the right direction.

Christian Thomas about 5 years ago

Hi, thanks for your response. I will have a look for it..

Christian Thomas about 5 years ago

This will only suitable for the button, right? What is with the input field. I also hope, that this will be fixed in further version of foundation.