Swimlane titles are not vertical in Internet Explorer 11

[gabrielcossette]

Issue

Server Setup Information:

• Did you test in newest Wekan?: Yes
• Wekan version: 1.21
• Operating System: Linux

Problem description:
In Internet Explorer 11, the swimlane titles on the left side are horizontal and upside down, instead of vertical.

[xet7]

@gabrielcossette

Screenshot please

[gabrielcossette]

@xet7 Sorry, here you go:

Seems like the CSS property is not being applied:

[xet7]

Sorry, I tried following fixes, but did not get it working right. Somebody could try to get it working.

diff --git a/client/components/swimlanes/swimlanes.styl b/client/components/swimlanes/swimlanes.styl
index dce298b..41a203f 100644
--- a/client/components/swimlanes/swimlanes.styl
+++ b/client/components/swimlanes/swimlanes.styl
@@ -32,23 +32,31 @@
     border-bottom: 1px solid #CCC
 
     .swimlane-header
-      writing-mode: vertical-rl;
-      transform: rotate(180deg);
-      font-size: 14px;
-      line-height: 50px;
-      margin-top: 50px;
-      font-weight: bold;
-      min-height: 9px;
-      width: 50px;
-      overflow: hidden;
-      -o-text-overflow: ellipsis;
-      text-overflow: ellipsis;
-      word-wrap: break-word;
-      text-align: center;
-
-    .swimlane-header-menu
-      position: absolute
-      padding: 20px 20px
+      writing-mode: vertical-rl
+      moz-transform: rotate(45deg)
+      o-transform: rotate(45deg)
+      webkit-transform: rotate(45deg)
+      filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.30710678, M12=-0.30710678, M21=0.30710678, M22=0.30710678, sizingMethod='auto expand')
+      ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.30710678, M12=-0.30710678, M21=0.30710678, M22=0.30710678, sizingMethod='auto expand')"
+      zoom: 1
+      position: relative\9
+      top: -21px\9
+      left: -21px\9
+      font-size: 14px
+      line-height: 50px
+      margin-top: 50px
+      font-weight: bold
+      min-height: 9px
+      width: 50px
+      overflow: hidden
+      -o-text-overflow: ellipsis
+      text-overflow: ellipsis
+      word-wrap: break-word
+      text-align: center
+
+      .swimlane-header-menu
+        position: absolute
+        padding: 20px 20px
 
 .list-group
   height: 100%

[yanqd0]

This issue bothered me too, in Chrome.

Version information: