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 [email protected]

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 [email protected]

@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 [email protected]

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

[tagliala]

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

[tagliala]

Some screenshots

Before:

input[type=file] has a default border and a gradient image.

select[multiple] has a gradient image.

After:

button,
textarea,
input,
select[multiple] /* WARNING!!! */
{
  background-image: none;
}

input[type="file"] {
  border: none;
}

Warning

The select[multiple] should be avoided because it has priority on .form-controls.

[zlatanvasovic]

Good point.

2013/8/2 Geremia Taglialatela [email protected]

Some screenshots
Before:

input[type=file] has a default border and a gradient image.

[image: screenshot_2013-08-02-15-48-29]https://f.cloud.github.com/assets/556268/901552/b4e4cd64-fb81-11e2-8679-ea914d3ace42.png

select[multiple] has a gradient image.

[image: screenshot_2013-08-02-15-48-44]https://f.cloud.github.com/assets/556268/901578/91d54faa-fb82-11e2-973f-fe3706632921.png
After:

button,textarea,input,select[multiple] /* WARNING!!! */{
background-image: none;}
input[type="file"] {
border: none;}

[image: screenshot_2013-08-02-16-29-17]https://f.cloud.github.com/assets/556268/901553/bd486e2a-fb81-11e2-8215-989b73f36406.png
[image: screenshot_2013-08-02-15-55-56]https://f.cloud.github.com/assets/556268/901579/91f3c354-fb82-11e2-84d3-2fb01cd6de60.png
Warning

The select[multiple] should be avoided because it has priority on
.form-controls.

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

Zlatan Vasović - ZDroid

[cvrebert]

Perhaps someone could track down Fennec's user agent stylesheet so that we can make sure we don't miss any elements from the background-image reset?

@tagliala You should report your hard-earned findings about these additional affected elements in the normalize.css issue. (Probably don't need to re-post the screenshots there though.)

[ssorallen]

Fennec's button style: https://hg.mozilla.org/mobile-browser/file/8167d57cab8e/themes/core/platform.css#l162

button {
  -moz-appearance: none;
  min-width: @touch_button_small@ !important; /* button size */
  min-height: @touch_button_small@ !important; /* button size */
  color: #000;
  border-radius: @border_radius_normal@;
  margin: @margin_normal@;
  padding: @padding_xnormal@;
  background-image: url("chrome://browser/skin/images/button-bg.png");
  background-size: auto 100%;
  border: @border_width_tiny@ solid #cacdd5;
}

I couldn't navigate Firefox's repository well enough to find its platform-specific stylesheets, but it looks like they're somewhere in here: https://hg.mozilla.org/mozilla-central/file/d3a0ac52d5d4/browser/themes

[tagliala]

@ssorallen the file should be this one: http://hg.mozilla.org/mozilla-central/file/d2ce76654a6a/mobile/android/themes/core/content.css

button {
  border-style: solid;
  border-color: #7d7d7d;
  color: #414141;
  background: white linear-gradient(rgba(255,255,255,0.2) 0, rgba(215,215,215,0.5) 18px, rgba(115,115,115,0.5) 100%);
}

here it is a fiddle: http://jsfiddle.net/tagliala/SkdNr/

edit: a new version with html.css + forms.css + content.css + bootstrap.css: http://jsfiddle.net/tagliala/SkdNr/1/

edit2: the fiddle is just an example

[ssorallen]

Nice find, @tagliala. I thought the one I found looked a bit off.

[mdo]

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

[ssorallen]

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

[mdo]

Groovy. Thanks so much @ssorallen.

[ggam]

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

[tagliala]

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

[ggam]

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

[cvrebert]

Fixed by #9567 / 4d527ec.

[cvrebert]

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