[IE] 인터넷익스플로러에서 background-attachment:fixed 사용시 버벅거림 해결방안

 

크롬과 파이어폭스 계열에선 background-attachment:fixed CSS부분이 문제없이 정상적으로 잘 작동을 합니다.

그러나 IE(인터넷익스플로러)와 edge(엣지) 계열에선 백그라운드를 고정을 하면, 버벅거림이 발생이 됩니다...

 

자바스크립트로 하는방법도 많지만 CSS로 해당 부분을 해결할수가 있는 부분이 있어서 기록을 해둡니다.

 

 

	/*Edge - works to 41.16299.402.0*/
    @supports (-ms-ime-align:auto) 
    {
        html{
            overflow: hidden;
            height: 100%;       
        }
        body{
            overflow: auto;
            height: 100%;
            position: relative;
        }
    }

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

 

위에 CSS를 넣으면 ie에서 버벅거림이 해결이 됩니다.

 

모르면, 한참을 헤메기때문에 알아두면 좋은 꿀팁이죠!!