From 753c587311c1f965c0d87377b6856ecc354e2a86 Mon Sep 17 00:00:00 2001
From: jlukic <jacklukic@gmail.com>
Date: Sun, 23 Nov 2014 22:10:11 -0500
Subject: [PATCH] #1252 Add fix for IE not obeying transform context

---
 src/definitions/modules/sidebar.js   | 73 ++++++++++++++++++++++------
 src/definitions/modules/sidebar.less |  7 ++-
 2 files changed, 62 insertions(+), 18 deletions(-)

diff --git a/src/definitions/modules/sidebar.js b/src/definitions/modules/sidebar.js
index 685f56383..2dedde9ca 100644
--- a/src/definitions/modules/sidebar.js
+++ b/src/definitions/modules/sidebar.js
@@ -163,37 +163,69 @@ $.fn.sidebar = function(parameters) {
             var
               width  = $module.outerWidth(),
               height = $module.outerHeight(),
-              style  = ''
-                + '<style title="' + namespace + '">'
-                + ' .ui.visible.left.sidebar ~ .fixed,'
-                + ' .ui.visible.left.sidebar ~ .pusher {'
+              style
+            ;
+            style  = ''
+              + '<style title="' + namespace + '">'
+              + ' .ui.visible.left.sidebar ~ .fixed,'
+              + ' .ui.visible.left.sidebar ~ .pusher {'
+              + '   -webkit-transform: translate3d('+ width + 'px, 0, 0);'
+              + '           transform: translate3d('+ width + 'px, 0, 0);'
+              + ' }'
+              + ' .ui.visible.right.sidebar ~ .fixed,'
+              + ' .ui.visible.right.sidebar ~ .pusher {'
+              + '   -webkit-transform: translate3d(-'+ width + 'px, 0, 0);'
+              + '           transform: translate3d(-'+ width + 'px, 0, 0);'
+              + ' }'
+              + ' .ui.visible.left.sidebar ~ .ui.visible.right.sidebar ~ .fixed,'
+              + ' .ui.visible.left.sidebar ~ .ui.visible.right.sidebar ~ .pusher,'
+              + ' .ui.visible.right.sidebar ~ .ui.visible.left.sidebar ~ .fixed,'
+              + ' .ui.visible.right.sidebar ~ .ui.visible.left.sidebar ~ .pusher {'
+              + '   -webkit-transform: translate3d(0px, 0, 0);'
+              + '           transform: translate3d(0px, 0, 0);'
+              + ' }'
+              + ' .ui.visible.top.sidebar ~ .fixed,'
+              + ' .ui.visible.top.sidebar ~ .pusher {'
+              + '   -webkit-transform: translate3d(0, ' + height + 'px, 0);'
+              + '           transform: translate3d(0, ' + height + 'px, 0);'
+              + ' }'
+              + ' .ui.visible.bottom.sidebar ~ .fixed,'
+              + ' .ui.visible.bottom.sidebar ~ .pusher {'
+              + '   -webkit-transform: translate3d(0, -' + height + 'px, 0);'
+              + '           transform: translate3d(0, -' + height + 'px, 0);'
+              + ' }'
+            ;
+
+            /* IE is only browser not to create context with transforms */
+            /* https://www.w3.org/Bugs/Public/show_bug.cgi?id=16328 */
+            if( module.is.ie() ) {
+              style += ''
+                + ' .ui.visible.left.sidebar ~ .pusher:after {'
                 + '   -webkit-transform: translate3d('+ width + 'px, 0, 0);'
                 + '           transform: translate3d('+ width + 'px, 0, 0);'
                 + ' }'
-                + ' .ui.visible.right.sidebar ~ .fixed,'
-                + ' .ui.visible.right.sidebar ~ .pusher {'
+                + ' .ui.visible.right.sidebar ~ .pusher:after {'
                 + '   -webkit-transform: translate3d(-'+ width + 'px, 0, 0);'
                 + '           transform: translate3d(-'+ width + 'px, 0, 0);'
                 + ' }'
-                + ' .ui.visible.left.sidebar ~ .ui.visible.right.sidebar ~ .fixed,'
-                + ' .ui.visible.left.sidebar ~ .ui.visible.right.sidebar ~ .pusher,'
-                + ' .ui.visible.right.sidebar ~ .ui.visible.left.sidebar ~ .fixed,'
-                + ' .ui.visible.right.sidebar ~ .ui.visible.left.sidebar ~ .pusher {'
+                + ' .ui.visible.left.sidebar ~ .ui.visible.right.sidebar ~ .pusher:after,'
+                + ' .ui.visible.right.sidebar ~ .ui.visible.left.sidebar ~ .pusher:after {'
                 + '   -webkit-transform: translate3d(0px, 0, 0);'
                 + '           transform: translate3d(0px, 0, 0);'
                 + ' }'
-                + ' .ui.visible.top.sidebar ~ .fixed,'
-                + ' .ui.visible.top.sidebar ~ .pusher {'
+                + ' .ui.visible.top.sidebar ~ .pusher:after {'
                 + '   -webkit-transform: translate3d(0, ' + height + 'px, 0);'
                 + '           transform: translate3d(0, ' + height + 'px, 0);'
                 + ' }'
-                + ' .ui.visible.bottom.sidebar ~ .fixed,'
-                + ' .ui.visible.bottom.sidebar ~ .pusher {'
+                + ' .ui.visible.bottom.sidebar ~ .pusher:after {'
                 + '   -webkit-transform: translate3d(0, -' + height + 'px, 0);'
                 + '           transform: translate3d(0, -' + height + 'px, 0);'
                 + ' }'
-                + '</style>'
-            ;
+              ;
+            }
+
+           style += '</style>';
+
             $head.append(style);
             $style = $('style[title=' + namespace + ']');
             module.debug('Adding sizing css to head', $style);
@@ -618,6 +650,15 @@ $.fn.sidebar = function(parameters) {
         },
 
         is: {
+
+          ie: function() {
+            var
+              isIE11 = (!(window.ActiveXObject) && 'ActiveXObject' in window),
+              isIE   = ('ActiveXObject' in window)
+            ;
+            return (isIE11 || isIE);
+          },
+
           legacy: function() {
             var
               element    = document.createElement('div'),
diff --git a/src/definitions/modules/sidebar.less b/src/definitions/modules/sidebar.less
index cae80bfed..3502e0474 100755
--- a/src/definitions/modules/sidebar.less
+++ b/src/definitions/modules/sidebar.less
@@ -139,7 +139,10 @@
   height: 0px;
   overflow: hidden;
   opacity: 0;
-  transition: opacity @duration;
+  transition:
+    transform @duration,
+    opacity @duration
+  ;
   will-change: opacity;
   z-index: @dimmerLayer;
 }
@@ -452,4 +455,4 @@
 }
 .ui.visible.scale.down.sidebar ~ .pusher {
   transform: scale(0.75);
-}
\ No newline at end of file
+}