Buttons look funky in Firefox for Android

@suralc

See comment w/ screenshot: #6342 (comment)
/cc @suralc
/cc @zdroid (why Zlatan didn't just file this issue themself, I don't understand)

Questions:

Have you tried with the newest Bootstrap at http://twbs.github.io/bootstrap/css/ ?
Have you tried with the July 22nd (most recent) release of Firefox for Android?
Have you tried with Firefox Beta for Android?
What version of Android are you using?

Caution: Firefox for Android isn't currently on the list of officially supported browsers (http://twbs.github.io/bootstrap/getting-started/#browsers ). But we'll try our best!

@cvrebert

@cvrebert I didn't file this issue because @suralc already mentioned it.
I'm using latest stable Firefox on LG Optimus 2X with Android 2.3. Tried with latest BS.

OK, marking as "confirmed" then.

:)

2013/7/28 Chris Rebert notifications@github.com

OK, marking as "confirmed" then.

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

Zlatan Vasović - ZDroid

I dug into this using Firefox remote debugging on a Nexus 4. It turns out the default user agent stylesheet for Android Firefox 22.0 uses a background-image to style the button elements. I created a page with a single <button> and nothing else in the document and looked at the button's computed style. Here is the relevant output:

window.getComputedStyle(document.getElementsByTagName('button')[0]).backgroundImage
-> "-moz-linear-gradient(50% 0%, rgba(255, 255, 255, 0.2) 0px, rgba(215, 215, 215, 0.5) 18px, rgba(115, 115, 115, 0.5) 100%)"

Bootstrap 3.0 only sets background-color, which means Firefox on Android's default background-image gradient sticks around.

To fix this, Bootstrap could set background-image: none on the btn class.

To confirm the fix of adding .btn { background-image: none; }, I added a new CSS rule in JS.

BEFORE

AFTER

document.styleSheets[4].insertRule('.btn {background-image: none;}',
  document.styleSheets[4].cssRules.length)

@ssorallen

@ssorallen Nice work!

I wonder whether this would be appropriate for normalize.css.

@ssorallen

Yea. Good idea Chris. It can go to Normalize.

2013/7/29 Chris Rebert notifications@github.com

@ssorallen https://github.com/ssorallen Nice work!

I wonder whether this would be appropriate for normalize.csshttps://github.com/necolas/normalize.css
.

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

I should open a new issue but it's the same one.

Please do not forget about textarea and input

Default

With

input,
textarea {
  background-image: none;
}

So, has anyone filed a bug about this with Mozilla like necolas asked?

@cvrebert

@cvrebert Is this a bug? Is there a spec that specifies how user agents should style elements? Using a background gradient is annoying since it's different from all other user agents, but it's not broken.

@cvrebert

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

2013/8/2 Ross Allen notifications@github.com

@cvrebert https://github.com/cvrebert Is this a bug? Is there a spec
that specifies how user agents should style elements? Using a background
gradient is annoying since it's different from all other user agents, but
it's not broken.

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

Zlatan Vasović - ZDroid

@zdroid

@zdroid I wouldn't call this a "bug". It could be filed as an improvement for the sake of making Android Firefox conform to convention, but styles don't appear to be a standard.

The default style sheet for HTML 4 provided by the W3C says, "Developers are encouraged to use it as a default style sheet in their implementations." It doesn't say it's a standard though; styling is up to the user agent.

The HTML5 spec gives suggested styles for elements, like the <h1>, but again they say they are suggestions.

@ssorallen

@ssorallen It's UX bug... improvment.

The styling as shown in the screenshots on that issue is intentional. Closing as wontfix unless you have a good argument against.

@cvrebert

@cvrebert select multiple needs some tweaking, too.

I will let you know and provide screenshots asap. Do you prefer this thread or the other one in normalize.css repo for feedbacks?

So what's the deal here then? Do we need to override some styles or is this all browser bugs and Normalize?

@mdo

@mdo It's not a bug. The change belongs in Normalize.

@ssorallen

Groovy. Thanks so much @ssorallen.

Until normalize gets updated, shouldn't we add a note in the docs, perhaps with a link to this issue?

@ggam

@ggam I suppose there is no mention because firefox mobile is not officially supported

@tagliala

@tagliala nor Linux is officialy supported (what I think is bad), but if there are known issues, at least we should warn of them to provide a decent user experience. I understand we have not enough community to test everything in all browsers, but if we mantain IE8 support, we cannot totally ignore emerging platforms.

Fixed by #9567 / 4d527ec.

(less) fixes twbs#8702 until Normalize.css starts handling this

Looks like Mozilla came to their senses and are shipping a fix for this in Android Firefox 35 (with regard to gradients).

Remove #8702 entry from Wall of browser bugs

Remove twbs#8702 entry from Wall of browser bugs

(less) fixes twbs#8702 until Normalize.css starts handling this

Navigation Menu

Repository navigation

Buttons look funky in Firefox for Android #8702

Default

With

6 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Buttons look funky in Firefox for Android #8702

Description

Activity

zlatanvasovic commented on Jul 28, 2013

cvrebert commented on Jul 28, 2013

zlatanvasovic commented on Jul 28, 2013

ssorallen commented on Jul 28, 2013

ssorallen commented on Jul 28, 2013

cvrebert commented on Jul 28, 2013

zlatanvasovic commented on Jul 29, 2013

tagliala commented on Aug 2, 2013

Default

With

cvrebert commented on Aug 2, 2013

ssorallen commented on Aug 2, 2013

zlatanvasovic commented on Aug 2, 2013

ssorallen commented on Aug 2, 2013

zlatanvasovic commented on Aug 2, 2013

tagliala commented on Aug 2, 2013

tagliala commented on Aug 2, 2013

6 remaining items

mdo commented on Aug 3, 2013

ssorallen commented on Aug 3, 2013

mdo commented on Aug 3, 2013

ggam commented on Aug 14, 2013

tagliala commented on Aug 14, 2013

ggam commented on Aug 14, 2013

cvrebert commented on Aug 15, 2013

cvrebert commented on Sep 22, 2014

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions