Buttons look funky in Firefox for Android

[cvrebert]

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!

[zlatanvasovic]

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

[cvrebert]

OK, marking as "confirmed" then.

[zlatanvasovic]

:)

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

[ssorallen]

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.

[ssorallen]

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)

[cvrebert]

@ssorallen Nice work!

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

[zlatanvasovic]

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
.

[tagliala]

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

[cvrebert]

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

[ssorallen]

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

[zlatanvasovic]

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

[ssorallen]

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

[zlatanvasovic]

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

[tagliala]

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