1
0
Fork 0
mirror of https://github.com/openstf/stf synced 2025-10-05 10:39:25 +02:00

Revert "Fix canvas rotation being off on devices which are naturally landscape."

Regressions:
1) Flicker badly in Chrome
2) Image gets very blurry because the image is uploaded to the GPU and there are rounding errors
3) Resizing is not smooth again

This needs another way of fixing.

This reverts commit 9fc1a9c7939b9f464c87a2f99cb06000f5aedcbc.
This commit is contained in:
Gunther Brunner 2014-09-11 20:59:17 +09:00
parent a9213e0659
commit f73cac8b24
2 changed files with 19 additions and 12 deletions

View file

@ -259,16 +259,16 @@ module.exports = function DeviceScreenDirective($document, ScalingService,
// changes from 180 to 270 (it will do a reverse rotation).
switch (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
}
}

View file

@ -3,6 +3,7 @@
-moz-transition: 1s linear opacity;
-o-transition: 1s linear opacity;
transition: 1s linear opacity;
opacity: 0;
}
@ -10,6 +11,14 @@
opacity: 1;
}
device-screen canvas {
transition: width 100ms linear, -webkit-transform 250ms ease-in-out;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: width, rotate(0deg);
transform: width, rotate(0deg);
}
device-screen {
position: relative;
display: block;
@ -26,14 +35,12 @@ device-screen {
device-screen canvas {
position: absolute;
top: 50%;
left: 50%;
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);
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none; /* MUST HAVE */
}
device-screen .finger {