Shapes fail to display correctly on test server, chrome only, when hide() then show().

[K-Noble22]

My page displays mermaid shapes correctly in Chrome on localhost. Works correctly in Firefox and Safari on both localhost and test server. Is only incorrect in Chrome on test server
I'm using bootstrap & javascript. We are seeing this in both Windows 7 & 10.

Chrome - Version 75.0.3770.142 (Official Build) (64-bit)
Bootstrap - V4.3.1
JQuery - v3.4.1

On setup page, user selects one of 5 pre-defined shapes by clicking one of the 5 radio buttons.
The relevant portion of the page, with all shapes showing, so you can see what they're each supposed to look like, when show()n:

The way it should look when landing on the page, or when a radio button is clicked.

The error: when it first comes into the page it looks correct, regardless of which shape (this is an Add/Update page), but when you click any of the other 4 buttons, it displays the shape incorrectly like this:


It's always a little square, this shape and size, but with the correct color.

My HTML:
HTML.txt

My Javascript:
JS.txt

This is my first bug posting - gentle advice is welcome - is there anything else I can provide?
Thank you!

[sagea]

It's a bit hard to debug with the files provided.
Would you be able to make a repository with some steps on how to run or provide?
or what versions of boostrap and jquery you are using?
Also, what version of chrome are you running?

[K-Noble22]

I edited the original post to include version numbers. I'll work on a repository after this morning's meeting. Thank you! Everyone on my team is stumped by this.

[K-Noble22]

Ok - I found the problem. It worked when I removed extra spaces, thus:

Broken: "classDef ender <"lots of spaces here"> fill:#fc6868,stroke:#333,stroke-width:3px; "
Fixed: "classDef ender fill:#fc6868,stroke:#333,stroke-width:3px; "