Animation not showing on homeassistant ios app

[aee74]

The animation works perfectly on my pc. But on the IOS app it's empty. even after clearing the frontend cache.

[RobertD502]

To add to this, it also doesn't seem to be working in Safari on MacOS. My assumption is that this is a webkit compatibility issue.

[dangreco]

This is a strange issue. The library I'm using for the animation, Framer Motion seems to support all browser variants. I have tested this (with success) on a webkit browser, but perhaps Apple's Safari does things differently. I'm going to borrow some Apple devices to test this on.

[aee74]

![Uploading 995D73F2-EDB0-46A8-B47B-36F1774A6F99.jpeg…]()

[aee74]

This with latest version on homeassistant ios app

[RobertD502]

@dangreco I’ll investigate it with Dev tools on my Mac and iPhone in the AM and will report back any useful info that I find.

[RobertD502]

@dangreco For some reason Safari on MacOS started displaying the card correctly. However, the card is throwing up the warning seen in the attached image. The warning appears whenever I load a lovelace dashboard that contains the card and also repeats itself every time I expand/collapse the card when the status of the printer is idle (when the card icon is blue).

iOS Companion App:

Your card is completely fine. This is purely a user error- in order for the card to work properly, iOS companion app users need to "Reset the frontend cache". Once that is done, the card works. The attached image is of the card viewed within the iOS companion app. It may be useful to add this to the instructions to avoid further issues of the same nature being opened. In order to reset the frontend cache, iOS users need to click on "App Configuration" in the sidebar from within the iOS Companion App --> then click on "Reset frontend cache" located at the bottom of the page. I do want to note that while debugging the card from within Mobile Safari on my iPhone, I received the same error as seen in the screenshot above- this doesn't cause the card to not work, so, it isn't really a pressing issue.

[aee74]

I did a frontend reset. And still no animation ![Uploading 2EFCEB6F-D08D-481A-A823-76A5E2A8408D.jpeg…]()

[aee74]

![Uploading 3DA3174E-F918-445F-8347-83BBA6492803.png…]()

[RobertD502]

@aee74 I’m not sure if I’m the only one, but none of your uploaded images are showing.

[aee74]

I’m also not seeing them. Try again

[aee74]

I can see the image when idle but not while printing

[RobertD502]

@aee74 Did you force quit the HA companion app after resetting the frontend cache?

[dangreco]

@dangreco For some reason Safari on MacOS started displaying the card correctly. However, the card is throwing up the warning seen in the attached image. The warning appears whenever I load a lovelace dashboard that contains the card and also repeats itself every time I expand/collapse the card when the status of the printer is idle (when the card icon is blue).

Digging around in the webpacked code revealed that the function e.match is part of the framer-motion library (or to my best judgement). I'll see if I can find a workaround by testing on Safari myself today + looking at the source code for framer-motion.

[aee74]

@aee74 Did you force quit the HA companion app after resetting the frontend cache?

Yes I did

[dangreco]

Updates on hunting down the bug

framer-motion depends on popmotion which contains the e.match(P) code responsible for the bug. I found two roots of this in the source code (marked by /* HERE */, but I can't tell which is the correct one:

Area 1

...
function analyse(v: string) {
  const values: Array<Color | number> = [];
  let numColors = 0;

  const colors = v.match(colorRegex); /* HERE */
  if (colors) {
    numColors = colors.length;
    // Strip colors from input so they're not picked up by number regex.
    // There's a better way to combine these regex searches, but its beyond my regex skills
    v = v.replace(colorRegex, colorToken);
    values.push(...colors.map(color.parse));
  }

  const numbers = v.match(floatRegex);
  if (numbers) {
    v = v.replace(floatRegex, numberToken);
    values.push(...numbers.map(number.parse));
  }

  return { values, numColors, tokenised: v };
}
...

Area 2

...
function test(v: any) {
  return (
    isNaN(v) &&
    isString(v) &&                               /* HERE */
    (v.match(floatRegex)?.length ?? 0) + (v.match(colorRegex)?.length ?? 0) > 0
  );
}
...

I'm guessing v is undefined at runtime when trying to be tested.

By the way, this is just me keeping a log while I go -- I'll be updating this thread with more findings.