CSS 剪辑路径 + JS 在 Chrome 上出现故障答案

【问题标题】：CSS clip-path + JS is glitchy on ChromeCSS 剪辑路径 + JS 在 Chrome 上出现故障
【发布时间】：2021-06-21 19:25:07
【问题描述】：

我的代码有问题。我试图以圆形掩盖我的主要底部。因此，我在上面使用了剪辑路径。一切都在Firefox上顺利运行，但在滚动页面时在chrome上闪烁。我做错了什么？顺便说一句，我在页面上使用 gsap 和滚动魔法，我看不出我会对它产生什么影响，但是......（没有 js + 剪辑路径完美，没有剪辑路径的 js 完美，但在一起它在 chrome 上出错）。

main{
    
    min-height:100vh;
    background:linear-gradient(to right top,#55c7d8 ,#b5ecf4 );
    overflow-x:hidden;
    clip-path: circle(3000px at 50% -50%);

}

我的 js 文件：

const parallax = document.getElementById("presentation");

window.addEventListener("scroll", function(){
    let offset = window.pageYOffset;
    parallax.style.marginTop= offset* 0.3 + "px";
})




jQuery(document).ready(function($) {
    $(".scroll-down").click(function(event){     
        event.preventDefault();
        $('html,body').animate({scrollTop:$(this.hash).offset().top}, 1500);
    });
});

const cheminnageur = {
    curviness: 1.25,
    autoRotate: true,
    values: [{x: -40, y: 30},{x: -60, y: 55},{x: -40, y: 110},{x: 10, y: 120},{x: 50, y: 110},{x: 60, y: 80},{x: 40, y: 70},{x: 10, y: 70},{x: -30, y: 90},{x: -20, y: 130}]
};



const tween = new TimelineLite();

tween.add(
    TweenLite.to('.swimmer', 1,{
        bezier: cheminnageur,
        ease: Power1.ease
    })
);

const controller = new ScrollMagic.Controller();
const scene = new ScrollMagic.Scene({
    triggerElement: "#presentation",
    duration: 200,
    triggerHook: 0
})
.setTween(tween)
.addTo(controller);

【问题讨论】：

标签： html css google-chrome clip-path

【解决方案1】：

看看 chrome 问题：https://bugs.chromium.org/p/chromium/issues/detail?id=611257

尝试使用will-change css 属性。

【讨论】：