CSS : fix Errors - 3D mouse hover flickering

아래 속성을 가진(Y축으로 자전) 엘리먼트를 감싸는 wrapper 엘리먼트에 솔루션 속성을 적용해야함

transform: rotateY(90turn);

// .site-wrap,

// .site-body,

// .hero-circle-wrap

.hero-wrap {

// backface-visibility: hidden;

transform: translate3d(0, 0, 0);

}

.hero-wrap 에 솔루션 속성 줌(특정 위치의 래퍼에 속성 적용하면 상위 래퍼에는 적용할 필요 없는 듯..), hero-circle, olayer-bling가 유발하던 flickering 에러 같이 교정됨

<section class="hero-wrap">

    <section class="hero-circle-wrap" data-depth=".7" data-type="parallax">

        <div class="hero-circle">

           <div class="olayer olayer--bling">

😭🤦🏻‍♀️ wrapper에 트리거를 사용해 GSAP  pin을 적용한 경우 GSAP 애니메이션이 먹지 않음 

 

https://twitter.com/joshwcomeau/status/1422626799436144644?lang=en 

★ ★ ★

에러교정

mouse hover flickering

https://maximelafarie.com/avoid-css-flickering

    /*-webkit-backface-visibility: hidden;*/
    -webkit-transform:translate3d(0,0,0);

-webkit-backface-visibility: hidden;

This CSS rule is designed to fix the flicker effect on Chrome-based browsers, applied to the HTML flickering element. But use it wisely : this rule works, but is not the most efficient way to avoid flickering effect. With this rule, you expose yourself to serious framerate drops and it can drastically reduce performance, so use it sparingly on the troublesome elements.

Moreover, it will not work for sprites or image backgrounds.

 

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

• Works on Safari and Chrome
• Works on sprites and image backgrounds
• Also works on SVGs
• Don’t cause big framerate drops