Center canvas with an extended margin: auto trick. Gets rid of half-pixel positions possible with translate().

res/app/components/stf/screen/screen-directive.js

@@ -227,16 +227,16 @@ module.exports = function DeviceScreenDirective($document, ScalingService,
               // changes from 180 to 270 (it will do a reverse rotation).
               switch (screen.rotation) {
                 case 0:
-                  canvas.style[cssTransform] = 'translate(-50%, -50%) rotate(0deg)'
+                  canvas.style[cssTransform] = 'rotate(0deg)'
                   break
                 case 90:
-                  canvas.style[cssTransform] = 'translate(-50%, -50%) rotate(-90deg)'
+                  canvas.style[cssTransform] = 'rotate(-90deg)'
                   break
                 case 180:
-                  canvas.style[cssTransform] = 'translate(-50%, -50%) rotate(-180deg)'
+                  canvas.style[cssTransform] = 'rotate(-180deg)'
                   break
                 case 270:
-                  canvas.style[cssTransform] = 'translate(-50%, -50%) rotate(90deg)'
+                  canvas.style[cssTransform] = 'rotate(90deg)'
                   break
               }
             }

res/app/components/stf/screen/screen.jade

@@ -1,4 +1,5 @@
-canvas(ng-show='device')
+div.screen-center
+  canvas(ng-show='device')
 div(ng-if='displayError').screen-error
   .screen-error-message
     nothing-to-show(message='{{"No device screen"|translate}}', icon='fa-eye-slash', ng-show='true')

res/app/control-panes/device-control/device-control.css

@@ -27,21 +27,29 @@ device-screen {
   user-select: none;
 }
 
-device-screen .screen-touch {
-  width: 100%;
-  height: 100%;
+device-screen .screen-center {
+  position: absolute;
+  top: -100%;
+  right: -100%;
+  bottom: -100%;
+  left: -100%;
+  pointer-events: none;
 }
 
 device-screen canvas {
   position: absolute;
-  top: 50%;
-  left: 50%;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  margin: auto;
+
   pointer-events: none; /* MUST HAVE or touch coordinates will be off */
   transition: width 100ms linear, -webkit-transform 250ms ease-in-out;
   -webkit-transform-origin: 50% 50%;
   transform-origin: 50% 50%;
   -webkit-transform: rotate(0deg);
-  transform: translate(-50%, -50%) rotate(0deg);
+  transform: rotate(0deg);
 }
 
 device-screen .finger {