Cross Browsing [IE]

IE 크로스 브라우징 하다가 마주친 버그와 대안법 정리

특이사항

• IntersectionObserver사용시 polyfill 필요함
• css animation of svg not working (loading spinner)

아직 이유를 찾지 못한 버그

• IE에서만 내가 입력하지 않은 글자가 프린팅됨 (예시: 영업시간ㄴ)

Background-iamge-attachment: fixed

/*Edge*/
@supports ( -ms-accelerator:true ) 
{
    html{
        overflow: hidden;
        height: 100%;    
    }
    body{
        overflow: auto;
        height: 100%;
    }
}
/*Ie 10/11*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) 
{
    html{
        overflow: hidden;
        height: 100%;    
    }
    body{
        overflow: auto;
        height: 100%;
    }
}

이렇게 사용할 경우 예상치 못한 버그를 마주칠 때가 있음
1. gatsby에서 scroll position issue(네비게이션을 통해 페이지를 변경할 때 전 페이지의 scroll position이 그대로 남아있음)

Min-height with flexbox

align-items: center not working properly when using with flexbox

const wrapper = styled.div`
  min-height: 90vh;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;

  // (*)
  &:after { 
    content: '';
    min-height: inherit;
    font-size: 0;
  }
`