Page MenuHomePhabricator

Notifications overlap large area of content in Monobook skin with Internet Explorer
Closed, ResolvedPublic

Description

As reported in dewiki (https://de.wikipedia.org/wiki/Wikipedia:Fragen_zur_Wikipedia#Bearbeitungen_eingeloggt_nicht_mehr_m.C3.B6glich) and enwiki (https://en.wikipedia.org/wiki/Wikipedia:Village_pump_(technical)#Misplaced_alert_buttons), starting with 1.29.0-wmf.18 some users can't click any links as they are overlapped by the invisible links from the notifications. As far as I can tell (I can't test it myself), only Monobook skin, and only Internet Explorer are affected. Very likely this is caused by the fix for T161302: Invisible link to notifications can overlap link to personal talk page

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Actually, this is also the case in Firefox

Please upload a screenshot of the issue. I can't reproduce this.

Okay, nevermind, I see it now. Please, always include a screenshot, it makes it so much easier. I only see the problem in IE 11 (not in Edge, and not in Firefox)

pasted_file (1×1 px, 533 KB)

I circled the broken personal bar, and the location where the missing icons appear in the middle of the page.

All links between the two circled area seem unclickable.

Similar problem in Firefox 3.6. The icons don't appear at all (they are also missing in Vector, which is otherwise unaffected). I can't reproduce in modern Firefox versions, though.

pasted_file (1×1 px, 551 KB)

It seems that the problem is caused by positioning with negative offsets inside an inline-block element.

Minimal test case: https://jsfiddle.net/50v6m0kb/3/

<div id="a">
  <div id="b">Text.</div>
</div>
<div>More text.</div>
#a { display: inline-block; }
#b { position: relative; top: -100px; }

Correct rendering: the "Text." disappears, leaving empty space.

pasted_file (951×1 px, 72 KB)

Incorrect rendering: everything is pushed down by 100px.
pasted_file (987×1 px, 85 KB)

matmarex triaged this task as Unbreak Now! priority.

Change 345871 had a related patch set uploaded (by Bartosz Dziewoński):
[mediawiki/extensions/Echo@master] Stop badge hacks from messing up the entire page on IE 11 on MonoBook

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

I'm still testing https://gerrit.wikimedia.org/r/345871 on various browsers. Note that this patch only changes files loaded only on MonoBook, so it can't cause any new issues for other skins.

I'll try to get the fix deployed today, but since it's Friday it might not be possible. In that case, it should be easy enough to apply it in on-wiki monobook.css, though.

An alternative solution would be to revert https://gerrit.wikimedia.org/r/345176 instead – that will regress T161302, but that was a smaller issue than this.

Change 345874 had a related patch set uploaded (by Reedy; owner: Bartosz Dziewoński):
[mediawiki/extensions/Echo@wmf/1.29.0-wmf.18] Stop badge hacks from messing up the entire page on IE 11 on MonoBook

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

Change 345874 merged by jenkins-bot:
[mediawiki/extensions/Echo@wmf/1.29.0-wmf.18] Stop badge hacks from messing up the entire page on IE 11 on MonoBook

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

Mentioned in SAL (#wikimedia-operations) [2017-03-31T19:44:02Z] <Reedy> Stop badge hacks from messing up the entire page on IE 11 on MonoBook T161869

The fix should be live on all wikis now. I would appreciate if someone could confirm that it works for them :)

Change 345871 merged by jenkins-bot:
[mediawiki/extensions/Echo@master] Stop badge hacks from messing up the entire page on IE 11 on MonoBook

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

@matmarex thank you so much Bartosz for fixing that

Checked in enwiki, testwiki, ruwiki (in IE11). When I switch to Monobook skin, I do not see labels 'alerts' and 'notices', as in https://phabricator.wikimedia.org/T161869. Some custom CSS(or CSS disabled?) were involved?

Alerts_bar_with_overlaps.png (28×596 px, 6 KB)

The standard badges are displayed in monobook:

IE11_monobook.png (768×1 px, 179 KB)