Page MenuHomePhabricator

Minimized PageCuration Toolbar rotates text 180 degrees instead of 90 degrees under IE11
Closed, ResolvedPublic

Description

Page_curation_upside_down.png (141×86 px, 2 KB)
Never mind the use of a paragraph tag (<p>) to hold the text, Curation, is a bad idea to begin with since it has top & bottom margin lengths defined by default (which in essence become margin left & right when rotated btw), but the p#mwe-pt-toolbar-vertical selector has a [ms-]transform setting to rotate 90 degrees (so + 90 degrees) in addition to an inline style for writing-mode set to tb-rl ( + another 90 degrees = 180 degrees hence the complete flip as in the screenshot).

Apparently, that additional inline setting was meant specifically for IE 8 and lower when detected but they're not using the corresponding ms- prefixed attribute for writing-mode at the same time for IE8 (or IE9) so I don't know what is going on there exactly. The specification by w3.org differs from MS's approach as well and I believe some of those 'top-bottom, left-right' writing-mode values applied only to objects that are .svg images (if I'm reading that right) and may have been deprecated at some point to boot.

Obviously, something is crossed with either the scripting for IE version detection and/or the appropriate attribute to use under each version of IE. Whatever the case may be, imo any fix 'should be' vetted against IE 8, 9, 10 & 11 independent of whatever claim any documentation makes as being valid before that patch is rolled-out. (Fyi - Does not happen with Microsoft Edge).


Originally reported in en.wp's Village Pump

Event Timeline

GOIII raised the priority of this task from to Needs Triage.
GOIII updated the task description. (Show Details)
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
GOIII set Security to None.

As of 11/02/2015, a working example of Page Curation exhibiting this bug can be seen when visiting the following page:

... or if that is no longer "valid", try selecting another from

Once you've located a valid example of Page Curation, just click on the ->| image to switch to minimal view where the problem can be seen. Note: must be logged in.

The bug here is that the browser test isn't actually working.

Switching writing-mode to -ms-writing-mode is also a good idea though.

Change 316506 had a related patch set uploaded (by Kaldari):
Fixing broken browser test for text rotation

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

Change 316506 merged by jenkins-bot:
Fixing broken browser test for text rotation

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

GTrang claimed this task.
GTrang subscribed.

This task should have been closed around October 18, 2016, but hasn't, so I'm closing this as "resolved" now, as Change 316506 has already been merged.