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);
}
}