Search code examples
cssfirefox-os

Button appears differently on Firefox OS simulator

What could be the reason this is happening?

It looks like this in the FFOS simulator 1.3:

Button with grey shade background (unintended)

When I tested my app on Windows 7 desktop, it looked like this which is what I indented:

Button with blueish background (intended)

Not sure where the grey shade is coming from, in the FFOS.

Here is the CSS that I used:

height: 3.2rem;
width: 3.2rem;
border-radius: 50%;
color: #7CB8D4;
border: 0.1rem solid #7CB8D4;
background-color: #E7F7FF;
outline: none;
line-height: 30%;
margin-right: 1rem;
font-weight: normal;
cursor: hand; 
cursor: pointer;
display: inline-block;

How do I fix this?

Solution

  • I believe this the same bug as https://bugzilla.mozilla.org/show_bug.cgi?id=958999 and is based on default Firefox OS Button style using background-image Try adding:

    background-image: none;

    BTW you can look at the Computed Styles in the Developer Tools to see this.

    enter image description here