scrollTrigger horizontal scroll flickers only on Safari

[bubenko]

Hey guys!

 

I'm new to GSAP and am currently trying to figure out why my horizontal scroll flickers on Safari macOS. Other browsers (Chrome, Opera, Mozilla) working smooth. Only on Safari having flickering issues.

 

Im using GSAP v3.4.2

 

Thank you for your help guys!

 

Here is example: https://janusaidev.wpengine.com/home-testing/

Here is the code:

(function( $ ) {

 // Reference
 // https://codepen.io/GreenSock/pen/ZEpNLZa
 if ($(".slider-panel")[0]){
  gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);

  const sections = gsap.utils.toArray(".slider-panel");
  let maxWidth = 0;

  const getMaxWidth = () => {
   maxWidth = 0;
   sections.forEach((section) => {
    maxWidth += section.offsetWidth;
   });
  };
  getMaxWidth();
  ScrollTrigger.addEventListener("refreshInit", getMaxWidth);

  gsap.to(sections, {
   x: () => `-${maxWidth - window.innerWidth}`,
   ease: "none",
   duration: 0.01,
   scrollTrigger: {
    trigger: ".sidescroll-inner",
    pin: true,
    scrub: true,
    duration: 0.01,
    snap: {
     delay: 0.25,
     snapTo: 1 / (sections.length - 1),
     duration: 0.125,
     ease: "power1.inOut",
    },
    end: () => `+=${maxWidth}`,
    invalidateOnRefresh: true
   },
  });

  gsap.utils.toArray(".platform-tab-list .platform-tab-link").forEach((a, i) => {
   a.addEventListener("click", e => {
    e.preventDefault();
    gsap.to(window, {scrollTo: i * (innerWidth + 540) })
   });
  });

  // Adds active state
  sections.forEach((sct, i) => {
   ScrollTrigger.create({
    trigger: sct,
    start: () => 'top top-=' + (sct.offsetLeft - window.innerWidth/2) * (maxWidth / (maxWidth - window.innerWidth)),
    end: () => '+=' + sct.offsetWidth * (maxWidth / (maxWidth - window.innerWidth)),
    toggleClass: {targets: sct, className: "active"}
   });
  });

  // Check actives
  $( window ).on('load scroll', function( e ) {
   $('.sidescroll-inner > .panel').each(function( index ) {
    var theId = $(this).attr('id');
    if ($(this).hasClass('active')) {
     // console.log(theId);
     $('.tab-link').removeClass('active');
     $('#nav_' + theId).addClass('active');
    }
   });
  });
 }

})( jQuery );

See the Pen ZEpNLZa by GreenSock (@GreenSock) on CodePen

[GreenSock]

Welcome to the forums, @bubenko. 

 

The CodePen demo you provided doesn't seem related at all - can you please provide a minimal demo of the flicker issue? Troubleshooting a full live site just isn't feasible - there are way too many factors. I'm sure once we see a minimal demo we'll be able to offer more advice.

 

I'd also strongly recommend using the latest version of GSAP/ScrollTrigger. 

[Али К]

@bubenko Hello , your problem with the CSS , Just add z-index to your class name
 

 

.platform-tab-list .platform-tab-link .tab-link.active p {
 color: #0c2340;
 z-index: 9;
}

 

 

[bubenko]

@Ali Manuel @GreenSock Thank you guys for your quick response. It seems like I'm experiencing some sort of performance issue with GSAP version 3.4.2 or it might be some CSS affecting the performance. When I'm using an older Mac it gives me this flickering using Safari. But on the newer ones everything is working well.

 

Here is the attached video example: 

https://vimeo.com/559373235

 

Thank you for your help guys!

[Али К]

@bubenko use the latest version of GSAP 
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>

 

[bubenko]

@Ali Manuel Changed the GSAP version to 3.6.1 and it seems like its flickering more than 3.4.2.

 

The weird thing that its only happening on Safari

[GreenSock]

@bubenko we'd be happy to look at a minimal demo - can you provide one please? Strip everything out except the absolute essentials to reproduce the issue. It doesn't need to use the real assets - just simple <div> elements or whatever is fine. I'm relatively confident it's something related to your CSS or the way you set things up. Once I see the minimal demo, I'm sure we'll be able to better assess. 

[bubenko]

@GreenSock @Ali Manuel No worries guys. I was running old mac OS, as a result it was giving flickering effect. When I updated OS everything works well!

 

Thank you for help!