Safari scroll flickering

Issue

SVG로 꾸민 페이지가 safari에서 스크롤시 흰 배경이 나오면서 로딩이 생김

References

https://github.com/vercel/next.js/issues/34455

이미지에만 한정된 PR이라 enterprise 이슈에도 해당되는지 모르겠음.

찾아보니 safari에서 div 스크롤시 하얀배경(body의 배경)이 나오면서 로딩이 걸리는 이슈가 있는 듯함 → next + emotion 조합의 문제는 아닌건가

css hack 사용 → 실패

-webkit-transform: translate3d(0, 0, 0);
will-change : transform

원인

배경에 깔려있던 블러 이미지 때문.
svg를 컴포넌트로 불러와 사용하도록 했으나 이게 레이아웃 계산에서 문제가 생기고 있었음
background로 불러와 사용하는 것이 좋음

// ❌
import EclipseIcon from "/__assets/icons/Eclipse.svg"
...
<EclipseIcon/>
...

// ⭕️
const WaitlistSection = styled(Section)`
  position: relative;
  overflow: hidden;
  background-color: ${COLORS.gray[900]};

  &::after {
    content: "";
    display: block;
    position: absolute;
    top: -50%;
    left: -20%;
    min-width: 900px;
    width: 100%;
    height: 600px;
    background: url("/__assets/icons/Eclipse.svg") no-repeat center center;
  }
`;

svg를 사용하는 다양한 방법
https://svgontheweb.com/ko/#implementation