fix(wallpaper): global blur issue, adjust layout in global (#1342)

Author: mydearxym

src/containers/layout/GlobalLayout/Wallpaper.tsx

@@ -1,4 +1,4 @@
-import { FC, memo, ReactNode } from 'react'
+import { FC, memo } from 'react'
 
 import type { TWallpaper } from '@/spec'
 import { parseWallpaper } from '@/utils/wallpaper'
@@ -8,20 +8,15 @@ import { Wrapper } from './styles/wallpaper'
 type TProps = {
   wallpaper: string
   wallpapers: Record<string, TWallpaper>
-  children: ReactNode
 }
 
-const Wallpaper: FC<TProps> = ({ wallpaper, wallpapers, children }) => {
+const Wallpaper: FC<TProps> = ({ wallpaper, wallpapers }) => {
   const { background, effect } = parseWallpaper(wallpapers, wallpaper)
 
   // for custom image/svg
   // for use style object not passing props
   // @link see https://github.com/styled-components/styled-components/issues/3315#issuecomment-885977691
-  return (
-    <Wrapper style={{ background }} effect={effect}>
-      {children}
-    </Wrapper>
-  )
+  return <Wrapper style={{ background }} effect={effect} />
 }
 
 export default memo(Wallpaper)

src/containers/layout/GlobalLayout/index.tsx

@@ -28,7 +28,13 @@ import Wallpaper from './Wallpaper'
 
 import { CustomScroller, Footer, ModeLine } from './dynamic'
 
-import { Wrapper, InnerWrapper, BodyWrapper, ContentWrapper } from './styles'
+import {
+  Skeleton,
+  Wrapper,
+  InnerWrapper,
+  BodyWrapper,
+  ContentWrapper,
+} from './styles'
 import { useInit, onPageScrollDirhange, childrenWithProps } from './logic'
 
 const Addon = dynamic(() => import('./Addon'), {
@@ -62,7 +68,7 @@ const GlobalLayoutContainer: FC<TProps> = ({
     <ThemePalette>
       {/* @ts-ignore */}
       <Addon />
-      <Wallpaper wallpaper={wallpaper} wallpapers={wallpapers}>
+      <Skeleton>
         {/* @ts-ignore */}
         <CustomScroller
           instanceKey={BODY_SCROLLER}
@@ -75,6 +81,7 @@ const GlobalLayoutContainer: FC<TProps> = ({
         >
           <Wrapper>
             <SEO metric={metric} config={seoConfig} />
+            <Wallpaper wallpaper={wallpaper} wallpapers={wallpapers} />
             <InnerWrapper metric={metric} sidebarPin={sidebarPin}>
               {/* @ts-ignore */}
               <ContentWrapper offsetLeft={sidebarPin}>
@@ -96,7 +103,7 @@ const GlobalLayoutContainer: FC<TProps> = ({
             {isMobile && <ModeLine metric={metric} />}
           </Wrapper>
         </CustomScroller>
-      </Wallpaper>
+      </Skeleton>
     </ThemePalette>
   )
 }

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

@@ -5,6 +5,15 @@ import type { TMetric } from '@/spec'
 // import { ASSETS_ENDPOINT } from '@/config'
 import css, { theme } from '@/utils/css'
 
+/**
+ * see layout details:
+ " @link https://css-tricks.com/the-fixed-background-attachment-hack/
+ */
+export const Skeleton = styled.div`
+  height: 100vh;
+  width: 100vw;
+`
+
 // background: #3b5456;
 export const Wrapper = styled.div`
   ${css.flex('justify-center')};
@@ -26,6 +35,7 @@ export const InnerWrapper = styled.div<TInner>`
   background: ${theme('bodyBg')};
   transition: all 0.2s;
   overflow-x: ${({ sidebarPin }) => (sidebarPin ? 'hidden' : '')};
+  z-index: 1;
   ${css.media.tablet`
     position: relative;
     padding-left: 0;

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

@@ -1,24 +1,18 @@
 import styled from 'styled-components'
 
-/**
- * see layout details:
- " @link https://css-tricks.com/the-fixed-background-attachment-hack/
- */
-
 export const Wrapper = styled.div<{ effect: string }>`
-  /* position: fixed; */
-  /* see https://www.zhangxinxu.com/wordpress/2015/11/css3-will-change-improve-paint/ */
-  will-change: transform;
   ${({ effect }) => effect || ''};
-
+  position: fixed;
+  top: 0;
   height: 100vh;
   width: 100vw;
 
-  transition: all 0.25s;
+  /* position: fixed; */
+  /* see https://www.zhangxinxu.com/wordpress/2015/11/css3-will-change-improve-paint/ */
+  will-change: transform;
+  transition: all 0.3s;
 `
-
 export const InnerWrapper = styled.div`
-  position: relative;
   left: 50%;
   transform: translateX(-50%);
   width: 80%;