Page MenuHomePhabricator

Notification badges misaligned in Monobook in IE11 and below
Closed, ResolvedPublic

Description

Split out from T142042. This appears to occur in all versions of IE except Edge (even IE11 on Windows 10, where T142042 did not occur). It seems to be caused by the fact that Monobook and Vector style the personal tools differently; the badges are display: inline-block but all the other personal tools are display: inline;, and this causes IE11 and below to push them down by 1em. Negative margins don't seem to be able to fix this, the only way I found was position: relative; top: -1em; but of course that screws things up in compliant browsers by moving the badges up off-screen.

monobook_IE11.png (1×1 px, 274 KB)

Event Timeline

Change 302854 had a related patch set uploaded (by Catrope):
Hack around browser bug in IE breaking badge alignment in Monobook

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

Change 302854 merged by jenkins-bot:
Hack around browser bug in IE breaking badge alignment in Monobook

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

Change 303337 had a related patch set uploaded (by Catrope):
Hack around browser bug in IE breaking badge alignment in Monobook

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

Change 303337 merged by jenkins-bot:
Hack around browser bug in IE breaking badge alignment in Monobook

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

Mentioned in SAL [2016-08-08T23:42:34Z] <catrope@tin> Synchronized php-1.28.0-wmf.13/extensions/Echo/modules/nojs/mw.echo.badge.monobook.less: Hack around IE bug breaking badge alignment in Monobook (T142053) (duration: 00m 50s)

Re-checked in 1.28.0-wmf.14 (ba1c692) for IE11
enwiki monobook

IE11_prod_monobook.png (614×976 px, 117 KB)

Examples of monobook IE11 in betalabs
IE11_beta_monobook.png (614×950 px, 60 KB)

For comparison - vector IE11 betalabs
IE11_beta_vector.png (614×932 px, 51 KB)