1px border glitch on chrome and firefox jitternes

[Wild West Design]

Hello,

I have two problems/issues:
 

1. Google Chrome sometimes does not render well 1px solid borders - i have a list of three columns and within them there is a element that has 1px solid border, in two of them the border looks glitchy like thicker that it should be. In the other one "thiner" looks like it should be without any glitches. Additionally this is random.. its not always the same ones rendered wrongly.. 

The code set up for this is:
 

.section__fade-in-group > * {

    opacity: 0;

    will-change: opacity, transform;

    visibility: hidden;

    transform: translateY(-20px);

 

  }

 

  if (section.querySelector(".section__fade-in-group")) {

        sectionTL.to(

          section.querySelector(".section__fade-in-group").children,

          {

            autoAlpha: 1,

            y: 0,

            duration: 0.75,

            stagger: 0.15,

            ease: "expo.out",

 

          },

          section.querySelector(".section__content") ? "-=0.5" : ""

        );

      }

 So the animation is pretty simple.. Does anyone know why is that happening?

 

2. The second problem is the Firefox, i have a lot of similiar animations like in point 1 but in Firefox they are a bit jittery - not as smooth as in Google Chrome.
For example: I have this animation for full width hero image:

 

 const imgCover = heroBanner.querySelector(".img-cover");

 

      heroBannerTL.fromTo(

        imgCover,

        {y: -20, scale: 1.1},

        {

          y: 0,

          scale: 1,

          opacity: 1,

          duration: 1.5,

          ease: "power3.out",

        }

      );

 

I have tried will-change and stuff but nothing helps.. is there anything that could smoothen?

UPDATE:
I have tried this:

 // Fix: pixel-snapping that Firefox applies for some reason during rendering (totally unrelated to GSAP).

          rotation: 0.1,

and seems like it helped.

 

thanks guyz!

[Rodrigo]

Glad to hear that you were able to solve it.

 

Yeah sometimes subpixel rendering can be a tricky thing in browsers, totally unrelated to GSAP, just a browser rendering issue that can be solved the way you did. I know there are a other tricks as well for these situations but can't recall them right now.