Made the vertical whiteboard centering compatible with Internet Explorer and more reliable.

labs/meteor-client/app/client/stylesheets/whiteboard.less

@@ -12,11 +12,6 @@
   @media @landscape {
     -webkit-order: 2;
     order: 2;
-    display: -moz-flex;
-    display: -ms-flexbox;
-    display: -ms-flex;
-    display: -webkit-flex;
-    display: flex;
   }
   @media @mobile-portrait-with-keyboard, @desktop-portrait, @mobile-portrait {
     -webkit-order: 1;
@@ -29,18 +24,12 @@
   /*height: auto !important;*/
   margin-left: auto;
   margin-right: auto;
+  width: 100%;
   #svggroup {
     display: block;
     height: 100% !important;
     width: 100% !important;
   }
-  @media @landscape {
-    position: relative;
-    top: 50%;
-    -webkit-transform: translateY(calc(~'-50% - 19px'));
-    -ms-transform: translateY(calc(~'-50% - 19px'));
-    transform: translateY(calc(~'-50% - 19px'));
-  }
 }
 
 #whiteboard-navbar {
@@ -49,3 +38,17 @@
   white-space: nowrap;
   width: 100%;
 }
+
+#whiteboard-container {
+  @media @landscape {
+    display: -moz-flex;
+    display: -ms-flexbox;
+    display: -ms-flex;
+    display: -webkit-flex;
+    display: flex;
+    align-items: center;
+    -webkit-align-items: center;
+    -ms-align-items: center;
+    height: calc(~'100% - 39px');
+  }
+}

labs/meteor-client/app/client/views/whiteboard/whiteboard.html

@@ -1,13 +1,15 @@
 <template name="whiteboard">
-	<div id="{{id}}" {{visibility name}} class="component gradientBar">
-		<h3 id="whiteboard-navbar" class="title">
-			<span class="glyphicon glyphicon-pencil"></span>
-			{{title}}
-		</h3>
-		{{#each getCurrentSlide}}
-			{{> slide}}
-		{{/each}}
-		<div id="whiteboard-paper">
-		</div>
-	</div>
+    <div id="{{id}}" {{visibility name}} class="component gradientBar">
+        <h3 id="whiteboard-navbar" class="title">
+            <span class="glyphicon glyphicon-pencil"></span>
+            {{title}}
+        </h3>
+        {{#each getCurrentSlide}}
+            {{> slide}}
+        {{/each}}
+        <div id="whiteboard-container">
+            <div id="whiteboard-paper">
+            </div>
+        </div>
+    </div>
 </template>