CSS clip-path + JS在Chrome上出现问题

Question

我的代码有一个问题。我试着把我的主管道的底部遮盖成一个圆形。因此，我在上面使用了clip-path。在火狐上一切都很顺利，但在chrome上滚动页面时却会闪烁。我做错了什么？顺便说一句，我在页面上使用了gsap和scroll魔法，我看不出我怎么能对它产生影响，但是……(没有js +剪辑路径可以完美工作，js没有剪辑路径可以完美工作，但是在chrome上有but )。

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);

Answer 1

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

请尝试使用will-change css属性。