ボタンがちらつき、Safariに隠れる

Question

私はSCSS、JavaScript、HTMLを使ってスライダーを構築しました。デモはここにある：https://jsfiddle.net/rr7g6a1b/

let mySlider = { 
    initializeSlider: function (options) { 
    let slider = options.container; 
    let slides = slider.querySelectorAll('.slide'); 
    let initialSlide = slider.querySelector('.slide[data-index="0"]'); 
    let initialButton = slider.querySelector('.pagination-button[data-index="0"]'); 
    initialSlide.classList.add('active'); 
    initialButton.classList.add('active'); 
    let sliderControlButton = slider.querySelector('.control-slider-button'); 
    if (options.autoplay === true) { 
     sliderControlButton.classList.add('stop'); 
    } else { 
     sliderControlButton.classList.add('play'); 
    } 
    sliderControlButton.addEventListener('click', function() { 
     mySlider.switchAutoplay(options); 
    }); 
    for (let i = 0; i < slides.length; i++) { 
     let button = slider.querySelector('.pagination-button[data-index="' + i + '"]'); 
     button.addEventListener('click', function() { 
     mySlider.goToSlide(options, i); 
     mySlider.stopAutoplay(options); 
     }); 
    } 
    if (options.autoplay === true) { 
     options.autoplayer = window.setTimeout(function() { 
     mySlider.goToNext(options); 
     }, options.duration); 
    } 
    }, 
    switchAutoplay: function (options) { 
    let sliderControlButton = options.container.querySelector('.control-slider-button'); 
    if (options.autoplay === true) { 
     mySlider.stopAutoplay(options); 
     sliderControlButton.classList.add('play'); 
     sliderControlButton.classList.remove('stop'); 
    } else { 
     mySlider.startAutoplay(options); 
     sliderControlButton.classList.remove('play'); 
     sliderControlButton.classList.add('stop'); 
    } 
    }, 
    goToSlide: function (options, target) { 
    let slider = options.container; 
    let targetSlide = slider.querySelector('.slide[data-index="' + target + '"]'); 
    if (!targetSlide.classList.contains('active')) { 
     let activeSlide = slider.querySelector('.slide.active'); 
     let activeButton = slider.querySelector('.pagination-button.active'); 
     let activeNum = activeSlide.dataset.index; 
     let targetNum = parseInt(target); 
     let go = false; 
     let direction = 'left'; 
     if (targetNum < activeNum) { 
     direction = 'right'; 
     } 

     let targetButton = slider.querySelector('.pagination-button[data-index="' + target + '"]'); 
     activeButton.classList.remove('active'); 
     targetButton.classList.add('active'); 

     let moveTarget = function (direction) { 
     let correct = direction; 
     let opposite = (direction === 'left') ? 'right' : 'left'; 
     correct = 'hide-' + direction; 
     opposite = 'hide-' + opposite; 
     targetSlide.classList.add('transitioning'); 
     window.setTimeout(function() { 
      targetSlide.classList.remove(correct); 
      targetSlide.classList.add(opposite); 
     }, 100); 
     window.setTimeout(function() { 
      targetSlide.classList.remove('transitioning'); 
     }, 150); 
     }; 
     let moveActive = function (direction) { 
     activeSlide.classList.remove('active'); 
     direction = 'hide-' + direction; 
     activeSlide.classList.add(direction); 
     }; 

     moveTarget(direction); 
     window.setTimeout(function() { 
     moveActive(direction); 
     targetSlide.classList.remove('hide-left'); 
     targetSlide.classList.remove('hide-right'); 
     targetSlide.classList.add('active'); 
     }, 200); 
    } 
    }, 
    goToNext: function (options) { 
    if (options.autoplay === true) { 
     let slider = options.container; 
     let currentSlide = slider.querySelector('.slide.active'); 
     let currentSlideIndex = currentSlide.dataset.index; 
     let lastSlide = slider.querySelectorAll('.slide').length - 1; 
     let nextSlide = 0; 
     if (currentSlideIndex != lastSlide) { 
     nextSlide = parseInt(currentSlideIndex) + 1; 
     } 
     mySlider.goToSlide(options, nextSlide); 
     options.autoplayer = window.setTimeout(function() { 
     mySlider.goToNext(options); 
     }, options.duration); 
    } 
    }, 
    stopAutoplay: function (options) { 
    options.autoplay = false; 
    window.clearTimeout(options.autoplayer); 
    }, 
    startAutoplay: function (options) { 
    options.autoplay = true; 
    options.autoplayer = window.setTimeout(function() { 
     mySlider.goToNext(options); 
    }, options.duration); 
    } 
}; 

let mainSlider = document.getElementById('main-slider'); 
let mainSliderOptions = { 
    container: mainSlider, 
    autoplay: false, 
    duration: 6000 
} 
mySlider.initializeSlider(mainSliderOptions); 

改ページボタンがChromeでなく、Safariで正常に動作し、彼らは時折ちらつくか、ボタンをクリックした後に切断し得ます。この種のちらつきのエラー/回避策はありますか？私はこの問題の原因となるものがわからない。

Answer 1

-webkit-ブラウザのCss回避策。フリッカーボタンのCSSに以下を追加してみてください。

-webkit-perspective: 1000; 
-webkit-backface-visibility: hidden; 
-webkit-transform: translate3d(0,0,0);