Flickity transform issue

Question

Before the holidays my client's site was working fine with the Flickity carousel. But after returning it has completely crashed, but it starts working when I resize the window.

I had a look at the console and I noticed that what is changing is that before I resize the window - the transform/translate code isn't there. But, when I resize it, evenly slightly - they appear again. (see screenshots)

I'm baffled by this as it was working perfectly fine, like I said. Any help would be greatly appreciated.

Thank you.

I have it setup through the Flickity CDN

my CSS -

.carousel {
  width: 100%;
}

.carousel-cell {
  width: 100%;
  height: 500px;
  margin-right: 10px;
  border-radius: 5px;
  left: 102%;
}

.carousel-cell.is-selected {
  position: absolute;
  left: 0%;
}

/* cell number */
.carousel-cell:before {
  display: block;
  text-align: center;
  content: carousel-cell;
  line-height: 200px;
  font-size: 80px;
  color: white;
}