Search code examples
javascripthtmlgoogle-chromesvgwebfonts

TypeError in onloadwff using object for SVG

I'm trying to display SVG-images on a webpage. The SVG image contain a custom font. To get Chrome (and other browsers) to load the WebFont used in the SVG I have added the following in the SVG.

<defs>
    <style>
        @import url('https://fonts.googleapis.com/css?family=<font>');
    </style>
</defs>

The image is added to the HTML-page by adding an object element. This works as the font is loaded and the text in the image is rendered with the defined WebFont in both Chrome and Firefox.

But in Chrome the following error is logged in the console:

Uncaught (in promise) TypeError: Cannot read property 'querySelectorAll' of null
    at e.getInputs (onloadwff.js:71)
    at e.<anonymous> (onloadwff.js:71)
    at onloadwff.js:71
    at Object.next (onloadwff.js:71)
    at a (onloadwff.js:71)

I have tried to search for similar issues but have come up short in finding an answer. Any ideas on what might be the issue in Chrome or how I can investigate the issue further?

Solution

  • I got same issue as this one and the root cause was from Chrome extension LastPass. Removing it worked for me.

    the bug is reported: https://forums.lastpass.com/viewtopic.php?f=12&t=323095&p=1080525&hilit=Cannot+read+property+%27querySelectorAll%27+of+null#p1080525

    Hope it will help.