Remove default background image in Firefox for Android

[zlatanvasovic]

Look at this twbs/bootstrap#8702. @ssorallen fixed that problem. Can that fix go to Normalize? 😄

[ssorallen]

The UA stylesheet isn't using !important, and so using the button selector does the trick:

button {
  background-image: none;
}

This is my test page: https://github.com/ssorallen/ssorallen.github.io/blob/master/button.html
And as a real page: http://ssorallen.com/button.html

[ssorallen]

Ignore the slight difference in button sizes; I pinch zoomed to get a better view and didn't zoom to the exact same level for each screenshot.

DEFAULT, NO ADDED STYLES:

WITH button { background-image: none; }:

[necolas]

Did anyone open an issue against Firefox for Android? Please can you link to it in this ticket. Thanks

[zlatanvasovic]

I will report it at bugzilla, or someone else will do. :D
But we can wait a lot until it will be fixed and also older versions will
not be supported.

2013/7/29 Nicolas Gallagher [email protected]

Did anyone open an issue against Firefox for Android? Please can you link
to it in this ticket. Thanks

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/214#issuecomment-21736302
.

Zlatan Vasović - ZDroid

[ssorallen]

Does the HTML spec specify how elements should be styled by user agents that implement it? If it doesn't, I wouldn't consider this a bug but possibly an improvement to make Firefox on Android style its <button> element like other user agents already out there.

[cvrebert]

Apparently <textarea> and <input type="text"> also have a similar problem; see comment twbs/bootstrap#8702 (comment)

[zlatanvasovic]

https://bugzilla.mozilla.org/show_bug.cgi?id=900871

[zlatanvasovic]

@necolas They don't want to fix that. So, can it be normalized?

[tagliala]

There are others background image on textarea, input and select: twbs/bootstrap#8702 (comment) (screenshots provided)

the problem is that the select tag is "fine", select[multiple] is not... details on the above comment. Someone is also trying to track firefox's platform-specific stylesheets

[tagliala]

The css file used by firefox mobile seems to be the following one: http://hg.mozilla.org/mozilla-central/file/d2ce76654a6a/mobile/android/themes/core/content.css

This one could help: http://tagliala.github.io/form-elements/ (version without bootstrap: http://tagliala.github.io/form-elements/default.html)

edit: another version with normalize: http://tagliala.github.io/form-elements/normalize.html

[tagliala]

Any news about this one?

I'm using:

button,
input,
select,
textarea {
  background: none;
}

input[type="file"] {
  border: none;
}

that also breaks the select gradient but it's fine for me.

[ssorallen]

@tagliala I would scope the change to only background-image since that is the only style that is out of the ordinary here:

button,
input,
select,
textarea {
  background-image: none;
}

input[type="file"] {
  border: none;
}

[tagliala]

@ssorallen I used background because mozilla is using background to customize: http://hg.mozilla.org/mozilla-central/file/d2ce76654a6a/mobile/android/themes/core/content.css#l120

alongside the gradient, there also is a white background color (overridden by bootstrap). I don't know the best practices to normalize this stuff. :)

[ssorallen]

@tagliala Mozilla does use the shorthand background, but the only part that is abnormal is background-image. Internet Explorer, Chrome, and Firefox also style button elements with background-color, and so leaving that in tact for mobile Firefox seems fine. Normalize.css isn't trying to be a full CSS reset.

[tagliala]

@ssorallen thanks for the clarification

[cvrebert]

Setting input { background-image: none; } breaks regular desktop Firefox, see twbs/bootstrap#10252

[necolas]

Is there a screenshot for the problem? On OS X it just looks like it exposes the default border style.

[zlatanvasovic]

@necolas It can be easily fixed. Just target mobile devices with that (with @media), not desktop ones. Look at my comment.

[necolas]

Not interest in doing that. I think it's the wrong solution.

The Firefox team seem uninterested in changing their default styles to avoid these problems. But, from a developer perspective, I think this stuff should be fixed in classes for button-like components, input components, etc., rather than in the base styles. So basically, I don't think the Bootstrap fix was the right way to do it. It should have been done in the .btn and form classes.

[cvrebert]

Looks like Mozilla came to their senses and are shipping a fix for this in Android Firefox 35.