Uncaught TypeError: e.trim is not a function

[weisJ]

I am getting the following error on Firefox (Version 122.0)

Uncaught TypeError: e.trim is not a function
    s proxy-cssom.js:178
    parse proxy-cssom.js:189
    _e proxy-animation.js:1044
    ze proxy-animation.js:1912
    <anonymous> (index):38
proxy-cssom.js:178:18
    s proxy-cssom.js:178
    parse proxy-cssom.js:189
    _e proxy-animation.js:1044
    ze proxy-animation.js:1912
    <anonymous> (index):38

Which happens in

function parseCSSNumericValue(value) {
    value = value.trim();
    if (value.match(/^[a-z(]/i)) {
      return parseMathFunction(value);
    } else {
      return parseCSSUnitValue(value);
    }
 }

[bramus]

The fix is easy but I would like to know what caused this. Do you have a demo or some code to share?

[weisJ]

This is with the Linux version of Firefox. Curiously it doesn't happen with the macOS version. The code is the following:

import 'https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js';

document.querySelector('.header-background').animate(
    { transform: ['translateY(0)', 'translateY(250px)'] },
    {
        fill: 'both',
        timeline: new ScrollTimeline({
            source: document.documentElement,
        }),
        rangeStart: new CSSUnitValue(0, 'px'),
        rangeEnd: new CSSUnitValue(document.querySelector('header').offsetHeight, 'px'),
    });

The issue arises on my computer at work. I can give you more details tomorrow.

[bramus]

I’ve got enough info with this. You’re directly passing in a CSSUnitValue instance, which is something we don’t properly handle.

As a workaround, for now, you can .toString() those instances and it should all work. I’m working on a proper fix.

[weisJ]

Thank you :)