Sorry to not have chimed in before, but needed to do a bit of research in webcompat bugs.
TLDR: removing -moz-appearance will break some sites. At least Japan airlines.
Le 11 févr. 2017 à 07:27, Mats Palmgren <
ma...@mozilla.com> a écrit :
> Status in other implementations: No other UA implements the unprefixed 'appearance' as far as I know. Edge implements '-webkit-appearance:none' but no other values, nor do they implement it unprefixed.
See also
https://github.com/whatwg/compat/issues/6#issuecomment-234159236
Le 17 févr. 2017 à 03:20, Benjamin Smedberg <
benj...@smedbergs.us> a écrit :
> - We cannot rely on prerelease users to file bugs about issues they do
> encounter. Bugzilla is intimidating in general, and even more intimidating
> for people who don't speak English fluently.
While this is true, things have improved a bit.
Right now
* Nightly Desktop ship with the report site issue button which lands on
https://webcompat.com.
* Nightly Android has it for a long time
In fact, it helped us to detect many breakages and fixed them. :) I intend to talk about it in platform lightning talks in SF, if there is such a session.
# About -moz-appearance. A selection of issues with one example for each.
## Case 1 (Double drop down arrows)
Here a case where the site is using:
https://webcompat.com/issues/3295#issuecomment-249768573
-webkit-appearance: none
appearance: none
but not -moz-appearance: none. This is a common pattern it leads to double drop-down arrows for Firefox Android. Usually the -webkit-appearance: none is using in combination of a background-image.
## Case 2 (background-image appearance sublimation)
There are cases more subtle and difficult.
https://webcompat.com/issues/1006#issuecomment-181650441
In this case the site has this markup
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
The solution to this would be for the site to either add -moz-appearance: none
OR for Gecko to change its behaviour so that we do like webkit and drops the appearance: button when there is a background-image.
A similar issue here:
https://webcompat.com/issues/1005#issuecomment-120774729
## Case 3
In
https://webcompat.com/issues/3836#issuecomment-263342153
They use only -webkit-appearance: none;
select {
font-family: Arial;
outline: none;
-webkit-appearance: none;
}
Currently what we usually recommend in these cases is to add `-moz-appearance: none;`. They were contacted on Nov 2016, still not fixed.
## Case 4
This one was confusing
https://webcompat.com/issues/4177
.nav-search .nav-category input[type="checkbox"] {
background:0;
-moz-appearance:none;
}
but eventually led to
https://bugzilla.mozilla.org/show_bug.cgi?id=1328474#c7
I need to retest once Mats patch lands in Nightly
## Case 5 (against removing -moz-appearance)
Here we will probably break again Japan Airlines if we remove -moz-appearance: none.
They implemented our suggestion to add -moz-appearance: none, which fixed the site issue. The site relies on the behaviour explained in Case 2, aka dropping the appearance when there is a background-image.
div.domModule table td select {
font-weight: bold;
font-size: 18px;
height: 54px;
border: none;
border-radius: 0px;
-webkit-border-radius: 0px;
background-color: transparent;
background-position: 97% 50%;
width: 100%;
-webkit-appearance: button;
-moz-appearance: none;
appearance: button;
}
div.domModule table td select {
background-image: url(../img/bg_dom_select_arw.png);
background-repeat: no-repeat;
background-size: 14px 14px;
-webkit-background-size: 14px 14px;
}
## Case 6 (another funky one, variation of case #2)
https://webcompat.com/issues/1061
<div class="target">
<select id="search_kbn" name="search_kbn" style="text-align:center;">
<option value="8">全てから</option>
…
</select>
</div>
The background image is a sprite (multiple images on a big png which is positioned) on the **DIV element**
AND the select has background: none but NO -webkit-appearance: none…
it's working for Webkit devices. FUN!
```
.listview li > a::after, .listview.frontbullet > li > a::after, .listview > li > div.additional-info::before, .icon, .search-box > .main > div.target, .search-box > .main > button[type="submit"], header > a::before, footer > div.go-to-top > a::before, .slide-navigation > .locator > .mark, .slide-navigation > a::before, .pager > a::before, .pager > a::after, .link-to-help > a::before, span.gift-icon, span.signage-icon, .member-icon, .notice.info::before, .notice.success::before, .notice.warning::before, .close-btn, .step-label > li::after, .options > label::before {
background-image: url(image/splite.png);
background-repeat: no-repeat;
background-size: 240px 215px;
-webkit-background-size: 240px 215px;
-moz-background-size: 240px 215px;
}
.search-box > .main > div.target {
width: 116px;
height: 32px;
background-position: -90px -115px;
}
.search-box > .main > div.target > select {
width: 116px;
height: 32px;
color: #FFF !important;
font-size: 12px;
font-weight: bold;
border: none;
background: none;
padding: 0 24px 0 5px;
}
```
--
Karl Dubost, mozilla 💡 Webcompat
http://www.la-grange.net/karl/moz