refactor(animation): add will-change to make transform fast

Author: mydearxym

src/containers/layout/GlobalLayout/styles/index.ts

@@ -11,13 +11,15 @@ export const Wrapper = styled.div`
 
   &:before {
     content: '';
-    position: absolute;
+    position: fixed;
+    width: 100%;
+    height: 100%;
     left: 0;
     top: 0;
     background-image: url(${ASSETS_ENDPOINT}/space-background.svg);
-    background-attachment: fixed;
-    width: 100%;
-    height: 100%;
+    /* background-attachment: fixed; */
+    /* see https://www.zhangxinxu.com/wordpress/2015/11/css3-will-change-improve-paint/ */
+    will-change: transform;
     opacity: 0.6;
   }
 `

src/containers/tool/Drawer/styles/index.ts

@@ -54,6 +54,7 @@ export const DrawerWrapper = styled.div.attrs(
   color: ${theme('drawer.font')};
   box-sizing: border-box;
   transition: transform 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
+  will-change: transform;
   font-family: Roboto, sans-serif;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   border-radius: 0px;