Last modified: 2013-07-19 12:10:55 UTC
Created attachment 12814 [details] Screenshot (FF10, Wikidata) In FF10 (no, I can't update) and IE9 in quirks mode the checkmark icon is repeated in both directions behind the menu.
Also observed on for example iOS/iPad.
In https://git.wikimedia.org/blob/mediawiki%2Fextensions%2FUniversalLanguageSelector/4e75a366efc79aed81a9d5e9f75b7c0de2ec4e30/lib%2Fjquery.ime%2Fcss%2Fjquery.ime.css#L171 the no-repeat is last in the decleration, while the "normal" position is directly after the url. Probably the broken browsers expect the different parts in the normal order and don't interprete them correctly otherwise.
For convenience pasting all uses of no-repeat in ULS. Sorted the occurrences in two groups. no-repeat immediately after URL: lib/jquery.ime/css/jquery.ime.css: background: url('../images/ime-active.png') no-repeat left center; lib/jquery.uls/css/jquery.uls.css: background: transparent url('../images/icon-language.png') no-repeat scroll left center; lib/jquery.uls/css/jquery.uls.css: background: transparent url('../images/world_map.png') no-repeat scroll right top; lib/jquery.uls/css/jquery.uls.css: background: transparent url('../images/close.png') no-repeat scroll center center; lib/jquery.uls/css/jquery.uls.css: background: transparent url('../images/search.png') no-repeat scroll right center; lib/jquery.uls/css/jquery.uls.css: background: transparent url('../images/clear.png') no-repeat scroll left center; no-repeat not immediately after URL: lib/jquery.ime/css/jquery.ime.css: background: url(../images/tick.png) left 4px center no-repeat; resources/css/ext.uls.displaysettings.css: background: transparent url('../images/display.png') left top no-repeat; resources/css/ext.uls.css: background: transparent url('../images/cog-sprite.png') right top no-repeat; resources/css/ext.uls.css: background: transparent url('../images/help.png') left center no-repeat; resources/css/ext.uls.inputsettings.css: background: transparent url('../images/input.png') left top no-repeat; resources/css/ext.uls.inputsettings.css: background: transparent url('../images/remove-input.png') left top no-repeat; resources/css/ext.uls.inputsettings.css: background: transparent url('../images/cog.png') center top no-repeat; Michael, are you familiar with any upstream reports on certain browsers or rendering engines behaving badly depending on where no-repeat is positioned? I'm not able to find a specification anywhere so far that seems to demand that the properties are specified in a certain order.
(In reply to comment #3) > I'm not able to find a specification anywhere so far that seems to demand > that > the properties are specified in a certain order. There is no such specification: http://www.w3.org/TR/css3-background/#the-background uses || as separator in the syntax, which means "at least one in any order" (http://www.w3.org/TR/WD-css3-syntax-20030813/#property-def-value), so it should work in any order. All current browsers seem to interprete the background syntax correctly in any order. But in FF10 I can see in the CSS inspector that the background is set to only -moz-linear-gradient(transparent, transparent), url("//bits.wikimedia.org/static-1.22wmf10/extensions/UniversalLanguageSelector/lib/jquery.ime/css/../images/tick.svg?2013-07-11T14:26:40Z") so probably this issue can be fixed by moving the no-repeat to directly after the url.
Change 74602 had a related patch set uploaded by Siebrand: Have no-repeat follow url for background images https://gerrit.wikimedia.org/r/74602
Upstream pull request, complementary to the one in comment 5 that only addresses non-lib code, at https://github.com/wikimedia/jquery.ime/pull/221.
background shorthand property should have this order as per http://www.w3schools.com/css/css_background.asp background-color background-image background-repeat background-attachment background-position
Change 74602 merged by jenkins-bot: Have no-repeat follow url for background images https://gerrit.wikimedia.org/r/74602
