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比較老。

希望這有助於！隨意評論任何更新。