Frozen marquee on production (works fine on development)

[eelke]

I am using ember-cli-sass to compile my stylesheets. In order to get ember-fast-marquee to work on production, I have to copy and paste the included CSS into a seperate marquee.scss file, which I include in my app.scss.

This works fine on development, but when building to production, the marquee is completely frozen.

It turns out something in my build pipeline removes all units like 'px' from variables with a value of 0. So, '0px' in css becomes '0', which usually is perfectly fine. However, it also did it with the calc() inside the @keyframes definition.

Switching from the use of calc(0px - var(...) to calc(-1 * var(...) in the @keyframes definition fixes this issue:

@-webkit-keyframes marquee_scroll__KV5JD {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(calc(-1 * var(--marquee-scroll-amount)), 0, 0);
  }
}

@keyframes marquee_scroll__KV5JD {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(calc(-1 * var(--marquee-scroll-amount)), 0, 0);
  }
}

[evoactivity]

Thanks for the report @eelke. I'm going to be doing a big maintenance push on this repo asap, I'll include this fix so that is avoided in future.