Skip to content

Error when rendering icon after using the "Translate to <spoken language>" feature in Google Chrome #159

@samcic

Description

@samcic

Describe the bug
On a new bare-bones Ember app, if the user uses the Chrome "Translate to " option on the page and then does something that renders an FA icon, a console error is shown and the icon isn't rendered.

Reproducible test case

  1. ember new translate-test
  2. Modify package.json and add "@fortawesome/ember-fontawesome": "^0.2.1" and "@fortawesome/free-brands-svg-icons" as devDependencies.
  3. Modify environment.js to include fontawesome: {icons: {'free-brands-svg-icons': ['google']}} in the ENV hash.
  4. Modify application.hbs to include the following:
<button {{on "click" (fn (mut this.showIcon) true)}}>Show</button>
{{#if this.showIcon}}
  {{fa-icon "google" prefix="fab"}}
{{/if}}
  1. Start the dev server, load the page in Chrome, right click on the page and select "Translate to English" (or any other language)
  2. Click the "Show" button on the page and observe the error in the console

Here's a video of the steps in the browser: https://recordit.co/tDCGmmOQJn

Expected behavior
The expected behavior is that the icon shows without error. If you load the page without translating, it works fine. It's only an issue if you translate the page first.

Desktop (please complete the following information):

  • Windows 10, Chrome, 85.0.4183.83 Browser

Additional context
Using the latest Ember 3.20 build.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions