Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove default background image in Firefox for Android #214

Closed
zlatanvasovic opened this issue Jul 29, 2013 · 20 comments
Closed

Remove default background image in Firefox for Android #214

zlatanvasovic opened this issue Jul 29, 2013 · 20 comments

Comments

@zlatanvasovic
Copy link
Contributor

@zlatanvasovic zlatanvasovic commented Jul 29, 2013

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

@ssorallen
Copy link

@ssorallen ssorallen commented Jul 29, 2013

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
Copy link

@ssorallen ssorallen commented Jul 29, 2013

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:
2013-07-29 09 55 03

WITH button { background-image: none; }:
2013-07-29 09 47 35

@necolas
Copy link
Owner

@necolas necolas commented Jul 29, 2013

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

@zlatanvasovic
Copy link
Contributor Author

@zlatanvasovic zlatanvasovic commented Jul 29, 2013

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

@ssorallen
Copy link

@ssorallen ssorallen commented Jul 29, 2013

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
Copy link

@cvrebert cvrebert commented Aug 2, 2013

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

@zlatanvasovic
Copy link
Contributor Author

@zlatanvasovic zlatanvasovic commented Aug 2, 2013

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

@tagliala
Copy link

@tagliala tagliala commented Aug 2, 2013

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
Copy link

@tagliala tagliala commented Aug 3, 2013

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
Copy link

@tagliala tagliala commented Aug 6, 2013

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
Copy link

@ssorallen ssorallen commented Aug 6, 2013

@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
Copy link

@tagliala tagliala commented Aug 14, 2013

@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
Copy link

@ssorallen ssorallen commented Aug 14, 2013

@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
Copy link

@tagliala tagliala commented Aug 14, 2013

@ssorallen thanks for the clarification

@cvrebert
Copy link

@cvrebert cvrebert commented Aug 28, 2013

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

@necolas
Copy link
Owner

@necolas necolas commented Aug 28, 2013

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

@zlatanvasovic
Copy link
Contributor Author

@zlatanvasovic zlatanvasovic commented Aug 28, 2013

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

@necolas
Copy link
Owner

@necolas necolas commented Aug 28, 2013

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
Copy link

@cvrebert cvrebert commented Sep 22, 2014

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
5 participants