diff --git a/src/base/layer/layer.drawer.js b/src/base/layer/layer.drawer.js
index e62c272dc..2bf2b2942 100644
--- a/src/base/layer/layer.drawer.js
+++ b/src/base/layer/layer.drawer.js
@@ -154,22 +154,22 @@ BI.Drawer = BI.inherit(BI.Widget, {
             switch (o.placement) {
                 case "right":
                     self.element.css({
-                        transform: "translateX(-" + size.width + "px)"
+                        left: "calc(100% - " + size.width + "px)"
                     });
                     break;
                 case "left":
                     self.element.css({
-                        transform: "translateX(" + size.width + "px)"
+                        right: "calc(100% - " + size.width + "px)"
                     });
                     break;
                 case "top":
                     self.element.css({
-                        transform: "translateY(" + size.height + "px)"
+                        bottom: "calc(100% - " + size.height + "px)"
                     });
                     break;
                 case "bottom":
                     self.element.css({
-                        transform: "translateY(-" + size.height + "px)"
+                        top: "calc(100% - " + size.height + "px)"
                     });
                     break;
             }
@@ -180,17 +180,26 @@ BI.Drawer = BI.inherit(BI.Widget, {
     hide: function (callback) {
         var self = this, o = this.options;
         requestAnimationFrame(function () {
+            var size = self._getSuitableSize();
             switch (o.placement) {
                 case "right":
+                    self.element.css({
+                        left: "100%"
+                    });
+                    break;
                 case "left":
                     self.element.css({
-                        transform: "translateX(0px)"
+                        right: "100%"
                     });
                     break;
                 case "top":
+                    self.element.css({
+                        bottom: "100%"
+                    });
+                    break;
                 case "bottom":
                     self.element.css({
-                        transform: "translateY(0px)"
+                        top: "100%"
                     });
                     break;
             }
@@ -213,7 +222,7 @@ BI.Drawer = BI.inherit(BI.Widget, {
     },
 
     setZindex: function (zindex) {
-        this.element.css({"z-index": zindex});
+        this.element.css({ "z-index": zindex });
     },
 
     destroyed: function () {
diff --git a/src/less/base/view/drawer.less b/src/less/base/view/drawer.less
index 76ab23d18..940b9b7c9 100644
--- a/src/less/base/view/drawer.less
+++ b/src/less/base/view/drawer.less
@@ -2,5 +2,5 @@
 
 .bi-drawer {
   .box-shadows(-6px 0 16px -8px #00000014, -9px 0 28px #0000000d, -12px 0 48px 16px #00000008);
-  .transitions(transform .3s cubic-bezier(.23, 1, .32, 1), box-shadow .3s cubic-bezier(.23, 1, .32, 1));
+  .transitions(inset .3s cubic-bezier(.23, 1, .32, 1), box-shadow .3s cubic-bezier(.23, 1, .32, 1));
 }