Page MenuHomePhabricator

Checkmark icon for IME repeated behind menu
Closed, ResolvedPublic

Description

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.


Version: unspecified
Severity: normal

Attached:

Details

Reference
bz51101

Event Timeline

bzimport raised the priority of this task from to High.Nov 22 2014, 2:08 AM
bzimport set Reference to bz51101.
Schnark created this task.Jul 10 2013, 9:13 AM

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