Breakout perspective for better IE11 support. (#594)

js/impress.js

@@ -133,11 +133,6 @@
         return " scale(" + s + ") ";
     };
 
-    // `perspective` builds a perspective transform string for given data.
-    var perspective = function( p ) {
-        return " perspective(" + p + "px) ";
-    };
-
     // `getElementFromHash` returns an element located by id from hash part of
     // window location.
     var getElementFromHash = function() {
@@ -384,7 +379,8 @@
             css( root, {
                 top: "50%",
                 left: "50%",
-                transform: perspective( config.perspective / windowScale ) + scale( windowScale )
+                perspective: ( config.perspective / windowScale ) + "px",
+                transform: scale( windowScale )
             } );
             css( canvas, rootStyles );
 
@@ -504,9 +500,13 @@
             // that both of them are finished.
             css( root, {
 
+                // For IE 11 support we must specify perspective independent
+                // of transform.
+                perspective: ( config.perspective / targetScale ) + "px",
+
                 // To keep the perspective look similar for different scales
                 // we need to 'scale' the perspective, too
-                transform: perspective( config.perspective / targetScale ) + scale( targetScale ),
+                transform: scale( targetScale ),
                 transitionDuration: duration + "ms",
                 transitionDelay: ( zoomin ? delay : 0 ) + "ms"
             } );

test/core_tests.js

@@ -37,9 +37,10 @@
     });
 
     QUnit.test( "Attributes", function( assert ) {
-      assert.expect( 9 );
+      assert.expect( 10 );
 
       var actual, expected;
+      var root = document.querySelector( "#impress" );
       var canvas = document.querySelector( "div#impress > div" );
 
       var canvasIsNotAStep = !canvas.classList.contains("step") && canvas.id === "";
@@ -78,6 +79,10 @@
       expected = "ease-in-out";
       assert.strictEqual( actual, expected, "canvas.style.transitionTimingFunction initialized correctly" );
 
+      actual = root.style.perspective;
+      expected = "";
+      assert.notStrictEqual( actual, expected, "root.style.perspective should be set explicitly for IE 11" );
+
       actual = document.documentElement.style.height;
       expected = "100%";
       assert.strictEqual( actual, expected, "documentElement.style.height is 100%" );