title: Button flickers, hides in Safari
body: <p>I have built a slider using SCSS, JavaScript, and HTML. The demo is here: <a href="https://jsfiddle.net/rr7g6a1b/" rel="nofollow noreferrer">https://jsfiddle.net/rr7g6a1b/</a></p>
  
  <pre><code>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 &lt; 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 &lt; 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);
  </code></pre>
  
  <p>The pagination buttons work fine in Chrome but in Safari, they occasionally flicker or get cut off after you click on the buttons. Is there an error/workaround for this kind of flickering? I'm not sure what could be causing this issue.</p>