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 <m...@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 <benja...@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 _______________________________________________ dev-platform mailing list dev-platform@lists.mozilla.org https://lists.mozilla.org/listinfo/dev-platform
