[Regression] Placeholder for search input is black instead of gray (again)
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	Schnark
	Feb 1 2014, 10:41 AM

Description

Since https://git.wikimedia.org/commitdiff/mediawiki%2Fcore.git/132ed8f5e013f19f67b34edbf58c31bb3f959bbe, the CSS file contains the code:

div#simpleSearch input:-ms-input-placeholder,
div#simpleSearch input:-moz-placeholder,
div#simpleSearch input::-webkit-input-placeholder {
  color: #999;
}

This is wrong, you must use three separate rules, even if they all specify the same "color: #999;", as a browser should ignore a rule completely when it contains an unknown selector. I.e. the file search.less should write

&:-ms-input-placeholder {
color: #999;
}
&:-moz-placeholder {
color: #999;
}
&::-webkit-input-placeholder {
color: #999;
}

(and perhaps a comment to explain why three different rules for the same style are necessary, as this isn't obvious).

Version: 1.23.0
Severity: normal

Details

Reference: bz60716

Event Timeline

• bzimport raised the priority of this task from to Needs Triage.Nov 22 2014, 3:02 AM

• bzimport added projects: MW-1.23.0-release, MediaWiki-User-Interface.

• bzimport set Reference to bz60716.

Schnark created this task.Feb 1 2014, 10:41 AM

Ehhh… sorry. On it.

Change 110683 had a related patch set uploaded by Bartosz Dziewoński:
vector: Split placeholder rules in search.less (again)

https://gerrit.wikimedia.org/r/110683

I actually don't see how this would ever cause the text to be black – the default placeholder color is a grey too (just a slightly different one) and I couldn't reproduce black color on any browser.

Change 110683 merged by jenkins-bot:
vector: Split placeholder rules in search.less (again)

https://gerrit.wikimedia.org/r/110683

It feels like there should be a better way to do this and avoid vendor prefixes... we should at least consider killing the moz and WebKit ones.

Which browser were you seeing this issue on?

(In reply to comment #5)

Which browser were you seeing this issue on?

I'm still forced to use FF10, but I can reproduce with IE10 also. The behavior probably depends on whether the placeholder is implemented as pseudo-element (Webkit, Firefox 19+) or as pseudo-class, which means that the style on the input itself can override the style of the placeholder. IMHO it's save to kill the &::-webkit-input-placeholder rule, but not the others.

Ergg.. legacy browsers. I should have known. We should definitely consider moving around these or at the very least document these parameters.

(In reply to comment #7)

Ergg.. legacy browsers. I should have known. We should definitely consider
moving around these or at the very least document these parameters.

Well, according to http://netrenderer.de/index.php this also happens in IE11, so it's not only legacy browsers.

I guess IE figured that placeholder text should be the same colour as the input. Both Firefox and Chrome seem to have Gray as the default which to me makes more sense. I wrote a commit to add comments so it's clear to developers why they exist.

For reference those comments are added in: https://gerrit.wikimedia.org/r/#/c/111516/

[Regression] Placeholder for search input is black instead of gray (again)Closed, ResolvedPublicActions

Description

Details

Event Timeline

[Regression] Placeholder for search input is black instead of gray (again)
Closed, ResolvedPublic
Actions