lottie-web: Lottie causing problems with Google Translate

Tell us about your environment Mac 2015 Retina Display

Browser and Browser Version: Chrome v.67

Problem My animations were working great on the website! I decided to add Google Translate and ended up getting hundreds of errors every second. I discovered by deduction that this was because of my Lottie animations. My HTML looks like this for the animation:

<div id="choosing" class="cardAnim"></div>

and the js :

var animation2 = bodymovin.loadAnimation({ container: document.getElementById('choosing'), renderer: 'svg', loop: true, autoplay: true, path: '/img/choosing/data.json', assetsPath: '' }) .

Anyways, the error Google translate is giving me from Lottie is :

element_main.js:405 Uncaught TypeError: a[b].target.className.indexOf is not a function at au.v.Ai (element_main.js:405)

Thanks in advance!

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 1
Comments: 15

Most upvoted comments

The issue continues to live. It is almost 2020 😃 The cause is the “Google Website Translator” embedded into Chrome now (not as an extension as it was earlier). When you try to open any non-native language page in Chrome it’s “Translator” starts to parse nodes on the page and checks it’s className in a straight way:

if (a[b].target && a[b].target.className && (0 <= a[b].target.className.indexOf(bc) ...

it checks only the existence of className and executes indexOf right after it. But for SVGElement the className is an instance of SVGAnimatedString which doesn’t have #indexOf().

I tried meta[name="google"][content="notranlate"], I tried class="notranslate". Often it doesn’t help. Especially with lazy-loaded SVGs (we have react + lottie + lazy loaded svg-jsons).

I tried to declare SVGAnimatedString.prototype.indexOf at the top of the page. But seems like Translator works in its own sandbox or not sure, didn’t investigate.

We were forced to switch off Sentry error tracker cause of the frequency of this error and exceeding our budget without profit. Especially when there is animation and exceptions are generated infinitely.

Some of the stackoverflow answers tell “turn off translator inside browser properties”. Aha. Inside the client’s browser. Give me just a sec…

Researching for a solution.

zaycker on Dec 15, 2019

We had the same issue, i wrote in details about it here: https://medium.com/@amir.harel/a-b-target-classname-indexof-is-not-a-function-at-least-not-mine-8e52f7be64ca

mrharel on Jul 18, 2018