Javascript Scrollen funktioniert nicht Safari aber funktioniert auf Chrome OSX

Question

Hat jemand irgendwelche Ideen, was Scrollen würde nicht auf Safari arbeiten, sondern auf Chrom arbeiten? Beide sind auf OSX.

In meiner Konsole logge ich das Delta und aus irgendeinem Grund, für schwache Schriftrollen protokolliert es immer entweder 3 oder -3. Wenn ich einige Male hintereinander blättere, wird es eventuell nach unten oder oben scrollen. Dies ist Parallax Scrolling. Hier ist mein Code:

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; 
    console.log(delta) 
    } 

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


.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: translate3d(0, -15vh, 0); 
} 
.background:first-child .content-wrapper { 
    -webkit-transform: translate3d(0, 15vh, 0); 
} 
.background:nth-child(2) { 
    background-image: url(2.jpg); 
} 
.background:nth-child(3) { 
    background-image: url(3.jpg); 
} 
.background:nth-child(1) { 
    z-index: 3; 
} 
.background:nth-child(2) { 
    z-index: 2; 
} 
.background:nth-child(3) { 
    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); 
} 

Answer 1

So schien das Problem mit zu nicht verwandeln: translate3d zusammen mit meinen webkit Transformationen und mit Überlauf auf auto gesetzt. Überlauf auf Versteckt setzen und die Transformation hinzufügen: translate3d überall, wo ich webkit-transform verwendet habe, behebt das Problem für mich.