CSSトランジション極めてラグ網膜ディスプレイ

Question

私はラスタースクロールでウェブサイトを作ってるんだ、それは網膜ディスプレイ上めちゃめちゃラグですが、MacBookの解像度が低くなっている滑らか。なぜ私は何の手掛かりがなく、私は何週間も答えを探してきました。私はまた、CSSの下に追加したjavascriptを使用しています。ここでは、CSS/JavaScriptのです：

.background { 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center center; 
    overflow: auto; 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-weight: 100; 
    will-change: transform; 
    -webkit-backface-visibility: hidden; 
      backface-visibility: hidden; 
    height: 130vh; 
    position: fixed; 
    text-shadow: black 2px 2px 2px; 
    width: 100%; 
    -webkit-transition: all 1.2s cubic-bezier(0.22, 0.44, 0, 1); 
    transition: all 1.2s cubic-bezier(0.22, 0.44, 0, 1); 
    color: #fff; 
} 

.background:first-child { 
    background-color: rgba(156, 146, 137, 1); 
    -webkit-transform: translateY(-15vh); 
} 
.background:first-child .content-wrapper { 
    -webkit-transform: translateY(15vh); 
} 
.background:nth-child(2) { 
    background-image: url(2.jpg); 
} 
.background:nth-child(3) { 
    background-image: url(3.jpg); 
} 
.background:nth-child(4) { 
    background-image: url(1.jpg); 
} 
.background:nth-child(5) { 
    /*NEW TITLE HERE*/ 
    background-image: url(3.jpg); 
} 
/* Set stacking context of slides */ 
.background:nth-child(1) { 
    z-index: 5; 
} 
.background:nth-child(2) { 
    z-index: 4; 
} 
.background:nth-child(3) { 
    z-index: 3; 
} 
.background:nth-child(4) { 
    z-index: 2; 
} 
.background:nth-child(5) { 
    z-index: 1; 
} 
.background:nth-child(n+2):before { 
    content: ""; 
    position: absolute; 
    width: 100%; 
    height: 100%; 

    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 

    background: -moz-linear-gradient(left, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.5) 20%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0.1) 100%); 
    background: -webkit-linear-gradient(left, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.5) 20%,rgba(0,0,0,0.5) 50%,rgba(0,0,0,0.5) 80%,rgba(0,0,0,0.1) 100%); 
    background: linear-gradient(to right, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.5) 20%,rgba(0,0,0,0.5) 50%,rgba(0,0,0,0.5) 80%,rgba(0,0,0,0.1) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1a000000', endColorstr='#1a000000',GradientType=1); 
} 
.content-wrapper { 
    height: 100vh; 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-pack: center; 
    -webkit-justify-content: center; 
     -ms-flex-pack: center; 
      justify-content: center; 
    text-align: center; 
    -webkit-flex-flow: column nowrap; 
     -ms-flex-flow: column nowrap; 
      flex-flow: column nowrap; 
    color: #fff; 
    will-change: transform; 
    -webkit-backface-visibility: hidden; 
      backface-visibility: hidden; 
    -webkit-transform: translateY(40vh); 
    -webkit-transition: all 1.7s cubic-bezier(0.22, 0.44, 0, 1); 
    transition: all 1.7s cubic-bezier(0.22, 0.44, 0, 1); 
} 
iframe { 
    width: 33vw; 
    height: 66vh; 

    float: right; 
} 
p { 
    word-wrap: break-word; 
} 
.image-style { 
    width:10vw; 
    height:7vh; 
    vertical-align: middle; 
} 

.background.up-scroll { 
    -webkit-transform: translate3d(0, -15vh, 0); 
} 
.background.up-scroll .content-wrapper { 
    -webkit-transform: translateY(15vh); 
} 
.background.up-scroll + .background { 
    -webkit-transform: translate3d(0, 30vh, 0); 
} 
.background.up-scroll + .background .content-wrapper { 
    -webkit-transform: translateY(30vh); 
} 
.background.down-scroll { 
    -webkit-transform: translate3d(0, -130vh, 0); 
} 
.background.down-scroll .content-wrapper { 
    -webkit-transform: translateY(40vh); 
} 
.background.down-scroll + .background:not(.down-scroll) { 
    -webkit-transform: translate3d(0, -15vh, 0); 
} 
.background.down-scroll + .background:not(.down-scroll) .content-wrapper { 
    -webkit-transform: translateY(15vh); 
} 
h1{ 
    font-family: trench; 
    font-size: 3vh; 
    font-weight: 900; 
} 
.header { 
    /*font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;*/ 
    font-weight: 200; 
    line-height: 160%; 
    font-size: 2vh; 
} 
.content-title { 
    font-size: 10vh; 
    line-height: 1.4; 
} 
.map-title-background { 
    /*background-color: #1477C5;*/ 
    background-color: #4D4D4F; 
    /*background-size: 100vw 100vh;*/ 
    box-shadow: 0px 10px 5px #888888; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    right: 0px; 
    margin: 0px; 
    padding: 0px; 
} 
.map-title { 
    font-weight: 300; 
    font-size: 8vh; 
} 
.project-title { 
    font-size: 10vh; 
    line-height: 1.4; 
    font-family: trench; 
} 
.background-fade { 
    height: 130vh; 
    width: 100vw; 
} 
.skills-programming { 
    /*margin-top: 10vh;*/ 
} 
.body-wrapper { 
    -webkit-box-pack: center; 
    -webkit-justify-content: center; 
    -ms-flex-pack: center; 
    justify-content: center; 
    text-align: center; 
    margin: auto; 
    position: fixed; 
    top: 0; 
    width: 50%; 
    left: 50%; 
    transform: translateX(-50%); 
} 

function parallaxScroll(evt) { 
    console.log("what about this") 
    if (isFirefox) { 
    //Set delta for Firefox 
    delta = evt.detail * (-120); 
    } else if (isIe) { 
    //Set delta for IE 
    delta = -evt.deltaY; 
    } else { 
    //Set delta for all other browsers 
    delta = evt.wheelDelta; 
    } 

    if (ticking != true){ 
    if (delta <= -scrollSensitivitySetting) { 
     //Down scroll 
     ticking = true; 
     if (currentSlideNumber !== (totalSlideNumber - 1)) { 
     currentSlideNumber++; 
     nextItem(); 
     } 
     slideDurationTimeout(slideDurationSetting); 
    } 
    if (delta >= scrollSensitivitySetting) { 
     //Up scroll 
     ticking = true; 
     if (currentSlideNumber !== 0) { 
     currentSlideNumber--; 
     previousItem(); 
     } 
     slideDurationTimeout(slideDurationSetting); 
    } 
    } 
} 

function touchScroll(ts, te) { 
    delta = te - ts; 
    if (ticking != true) { 
    if (delta <= -scrollSensitivitySetting) { 
     //Down scroll 
     ticking = true; 
     if (currentSlideNumber !== totalSlideNumber - 1) { 
     currentSlideNumber++; 
     nextItem(); 
     } 
     slideDurationTimeout(slideDurationSetting); 
    } 
    if (delta >= scrollSensitivitySetting) { 
     //Up scroll 
     ticking = true; 
     if (currentSlideNumber !== 0) { 
     currentSlideNumber--; 
     } 
     previousItem(); 
     slideDurationTimeout(slideDurationSetting); 
    } 
    } 
} 

// ------------- SET TIMEOUT TO TEMPORARILY "LOCK" SLIDES ------------- // 
function slideDurationTimeout(slideDuration) { 
    setTimeout(setTicking, slideDuration); 
} 

function setTicking() { 
    ticking = false; 
} 

var mousewheelEvent = isFirefox ? "DOMMouseScroll" : "wheel"; 
var ts; 

// ------------- ADD EVENT LISTENER ------------- // 
$(document).ready(function() { 
    console.log("called once") 
    totalSlideNumber = $("section").length; 
    window.addEventListener(mousewheelEvent, _.throttle(parallaxScroll, 60), false); 

    window.addEventListener("touchstart", function(e) { 
    ts = e.touches[0].clientY; 
}, false); 
window.addEventListener("touchend", function(e) { 
    var te = e.changedTouches[0].clientY; 
    touchScroll(ts, te); 
}, false); 
}); 

// ------------- SLIDE MOTION ------------- // 
function nextItem() { 
    var $previousSlide = $("section").eq(currentSlideNumber - 1); 
    $previousSlide.removeClass("up-scroll").addClass("down-scroll"); 
} 

function previousItem() { 
    var $currentSlide = $("section").eq(currentSlideNumber); 
    $currentSlide.removeClass("down-scroll").addClass("up-scroll"); 
} 

Answer 1

あなたのコードを確認した後、私はいくつかの提案を持っています。

• will-changeプロパティを削除します。それは変換を助けるために仮定するですが、使用上、および多くの場合、あまりにも多くのリソースをタイアップして、ページを遅くないことができます。プロパティについてはCheck out the MDN docsどこ

• 使用transform3d可能。私はあなたがいくつかの場所でtransformYを使用しているのを見て、私はtransform3dが通常変換の良い最適化を提供することを発見します。

• は、私は可能な限りtransition:all ...を避けるのが好き。私は正直なところ、それを裏付ける証拠はありませんが、あなたが明示的に変換しているものだけを変換するほうがよいと思います。

• 最後に、それはちょうどあなたのMacBookが古いものや開いているプログラムの多くを持つように単純である可能性があります。高速のコンピュータでも同じことが確認できますか？つまり、あなたのmacbookが古い場合です。

これが役立ちます。お気軽にコメントしてください。