CenterMode in React Slick not centering items exactly in Chrome Browser

Question

The slider is sitting in a container that is 100% the width of the viewport and width is being determined by each image element child which is ultimately governed by the height of the parent container. These are native images in an img tag so they proportionally scale their aspect ratio according to the height. This works as intended in Safari, but Chrome is a bit off from center and is consistently left of center by a bit. I have centerPadding: 0px. Not sure what is going on here. Since it works perfectly in Safari, but not Chrome, I'm guessing there is is something off about how width is being calculated, or when its being calculated.

.projectslider {
  height: 100%;
  padding: 0;

  .slick-list {
    height: 100%;

    .slick-track {
      height: 100%;

      .slick-slide {
        height: 100%;

        > div {
          height: 100%;
          width: auto;

          figure {
            outline: none;
            height: 100%;
            width: auto !important;
            margin: 0;
            padding: 0 25px;
            position: relative;
            z-index: 1;

            img,
            video {
              cursor: pointer;
              height: 100%;
              outline: none;
              width: auto;
            }
          }
       }
     }
   } 
  }
}


 const slide_settings = {
    infinite: true,
    slidesToScroll: 1,
    slidesToShow: 1,
    arrows: false,
    dots: false,
    speed: 400,
    swipe: true,
    swipeToSlide: true,
    easing: "ease-out",
    className: "projectslider",
    variableWidth: true,
    centerMode: true,
    centerPadding: "0px",
    afterChange: (index) => {
      setCurrentMedia(index);
    },
  };



<div className={styles.inner}>
        <Slider className={"projectslider"} ref={sliderRef} {...slide_settings}>
          {mediaData.map((media, index) =>
            media.type === "videotype" ? (
              <figure onClick={() => goToSlide(index)} key={index}>
                <video autoPlay loop playsInline muted>
                  <source src={media.videoFile} type="video/mp4" />
                </video>
              </figure>
            ) : (
              <figure key={index} onClick={() => goToSlide(index)}>
                <img
                  src={media.largeImgURL + "?auto=format"}
                  alt={media.caption}
                />
              </figure>
            )
          )}
        </Slider>
      </div>

You can see a live version here.