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
zdroid opened this Issue Jul 29, 2013 · 20 comments

Comments

Projects
None yet
5 participants
@zdroid
Copy link
Contributor

zdroid commented Jul 29, 2013

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

@ssorallen

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link
Owner

necolas commented Jul 29, 2013

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

@zdroid

This comment has been minimized.

Copy link
Contributor Author

zdroid 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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

cvrebert commented Aug 2, 2013

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

@zdroid

This comment has been minimized.

Copy link
Contributor Author

zdroid commented Aug 2, 2013

@zdroid

This comment has been minimized.

Copy link
Contributor Author

zdroid commented Aug 2, 2013

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

@tagliala

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

tagliala commented Aug 14, 2013

@ssorallen thanks for the clarification

@cvrebert

This comment has been minimized.

Copy link

cvrebert commented Aug 28, 2013

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

@necolas

This comment has been minimized.

Copy link
Owner

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.

@zdroid

This comment has been minimized.

Copy link
Contributor Author

zdroid 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

This comment has been minimized.

Copy link
Owner

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

This comment has been minimized.

Copy link

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
You can鈥檛 perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.