diff --git a/js/impress.js b/js/impress.js index a33f3b8..6f98d93 100644 --- a/js/impress.js +++ b/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" } ); diff --git a/test/core_tests.js b/test/core_tests.js index c8a245e..12d2378 100644 --- a/test/core_tests.js +++ b/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%" );