Remove default background image in Firefox for Android

@ssorallen

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

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

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; }:

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

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 notifications@github.com

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

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.

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

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

@necolas

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

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

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

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.

@tagliala

@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;
}

@ssorallen

@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. :)

@tagliala

@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.

@ssorallen

@ssorallen thanks for the clarification

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

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

@necolas

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

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.

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

Remove background-image: none; on .form-control

Navigation Menu

Repository navigation

Remove default background image in Firefox for Android #214

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Remove default background image in Firefox for Android #214

Description

Activity

ssorallen commented on Jul 29, 2013

ssorallen commented on Jul 29, 2013

necolas commented on Jul 29, 2013

zlatanvasovic commented on Jul 29, 2013

ssorallen commented on Jul 29, 2013

cvrebert commented on Aug 2, 2013

zlatanvasovic commented on Aug 2, 2013

zlatanvasovic commented on Aug 2, 2013

tagliala commented on Aug 2, 2013

tagliala commented on Aug 3, 2013

tagliala commented on Aug 6, 2013

ssorallen commented on Aug 6, 2013

tagliala commented on Aug 14, 2013

ssorallen commented on Aug 14, 2013

tagliala commented on Aug 14, 2013

cvrebert commented on Aug 28, 2013

necolas commented on Aug 28, 2013

zlatanvasovic commented on Aug 28, 2013

necolas commented on Aug 28, 2013

cvrebert commented on Sep 22, 2014

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions