JS Error when viewing MR with Mermaid diagram

Summary

JS Error when viewing changes in MR with Mermaid diagram

Steps to reproduce

  1. Create an MR that contains a Mermaid diagram in description
  2. Navigate to the Changes tab and refresh the page (https://gitlab.com/gitlab-org/gitlab/-/merge_requests/xxx/diffs)
  3. Observe JS error Encountered an error while rendering: TypeError: t.ownerSVGElement.getScreenCTM() is null
  4. Navigate back to Overview tab and observe the Mermaid diagram failed to render correctly

Example Project

(If possible, please create an example project here on GitLab.com that exhibits the problematic behavior, and link to it here in the bug report)

(If you are using an older version of GitLab, this will also determine whether the bug is fixed in a more recent version)

What is the current bug behavior?

(What actually happens)

What is the expected correct behavior?

(What you should see instead)

Relevant logs and/or screenshots

Screen_Shot_2020-06-09_at_3.11.39_pm

TypeError: "elem.ownerSVGElement.getScreenCTM() is null"
    getCoords http://localhost:3000/assets/webpack/vendors~mermaid.chunk.js:2490
    points http://localhost:3000/assets/webpack/vendors~mermaid.chunk.js:2506
    enter http://localhost:3000/assets/webpack/vendors~mermaid.chunk.js:2506
    attrFunction http://localhost:3000/assets/webpack/vendors~mermaid.chunk.js:20982
    default http://localhost:3000/assets/webpack/vendors~mermaid.chunk.js:9881
    default http://localhost:3000/assets/webpack/vendors~mermaid.chunk.js:21006
    enter http://localhost:3000/assets/webpack/vendors~mermaid.chunk.js:2503
    createEdgePaths http://localhost:3000/assets/webpack/vendors~mermaid.chunk.js:2413
    fn http://localhost:3000/assets/webpack/vendors~mermaid.chunk.js:22794
    Lt http://localhost:3000/assets/webpack/vendors~mermaid.chunk.js:9856
    render http://localhost:3000/assets/webpack/vendors~mermaid.chunk.js:9856
    a http://localhost:3000/assets/webpack/vendors~mermaid.chunk.js:9863
    init http://localhost:3000/assets/webpack/vendors~mermaid.chunk.js:9863
    renderMermaidEl http://localhost:3000/assets/webpack/main.chunk.js:34486
    renderMermaids http://localhost:3000/assets/webpack/main.chunk.js:34539
    each http://localhost:3000/assets/webpack/main.chunk.js:16023
    each http://localhost:3000/assets/webpack/main.chunk.js:15858
    renderMermaids http://localhost:3000/assets/webpack/main.chunk.js:34516

Output of checks

(If you are reporting a bug on GitLab.com, write: This bug happens on GitLab.com)

Results of GitLab environment info

Expand for output related to GitLab environment info 
(For installations with omnibus-gitlab package run and paste the output of:
`sudo gitlab-rake gitlab:env:info`)

(For installations from source run and paste the output of:
`sudo -u git -H bundle exec rake gitlab:env:info RAILS_ENV=production`)

Results of GitLab application Check

Expand for output related to the GitLab application check 
(For installations with omnibus-gitlab package run and paste the output of:
sudo gitlab-rake gitlab:check SANITIZE=true)


(For installations from source run and paste the output of:
sudo -u git -H bundle exec rake gitlab:check RAILS_ENV=production SANITIZE=true)


(we will only investigate if the tests are passing)

Possible fixes

(If you can, link to the line of code that might be responsible for the problem)

Edited by Tan Le