Different ScrollTrigger Behavior on Safari/Firefox vs Chrome

[Visualpro]

I finished a website today that has some gsap with scrolltriggers included.
I develop on Chrome (MacOS) and on Chrome the animation is exactly like I would like it to be.

But in Safari and Firefox the animations start way later than in Chrome. I haven't found anything in the Forum about this. 
Maybe someone can give me a hint what the problem might be. The Elements are Divs

This is the script I use:

 

window.onload = function() {
    gsap.registerPlugin(ScrollTrigger);
    
    const fadeinAnim = document.querySelectorAll(".scroll-into-view");
    
  fadeinAnim.forEach(element => {  
    gsap.from(element, {
        opacity:0,
        y:100,
        duration: 1.5,
        scrollTrigger: {
        trigger: element,
        start: "top bottom"
        }
    });
 })
}

I've attached some screenshots with markers.
The website is: https://evw-insektenschutz.de/
 

Thank you.

[GreenSock]

Welcome to the forums, @Visualpro! Congrats on the site launch.

 

I'm not aware of anything in GSAP/ScrollTrigger that would cause differences like that. We can't effectively troubleshoot live web sites - you'll significantly increase your chances of getting an answer if you post a minimal demo that isolates things. Otherwise, there are just too many factors in a live site (other libraries, server-related stuff, tons of CSS, etc.). 

 

If I were you, I'd identify one of the problematic elements (the ones that are showing up much later in Safari) and check the getBoundingClientRect() inside your window.onload to see if it's where you THINK it is. I wonder if there's some kind of layout issue where Safari is initially rendering it at a different place. Maybe it has to do with a layout quirk with a certain CSS technology that doesn't have great support in Safari (or functions differently). Take ScrollTrigger out of the equation and see if they page renders identically in both browsers. And make absolutely sure that everything is fully loaded that might affect layout BEFORE you create your ScrollTriggers. I've seen people accidentally forget to set heights on their elements and then they create their ScrollTriggers before their images load, so positions get calculated with the page layout one way...and then the images load and push stuff way down on the page. 

 

Once we can see a minimal demo, we'd be happy to take a peek. 

[Visualpro]

Thank you. That hinted me to the right direction and I found an empty transform-parameter on the images.