Embedded svg icon causes browser to hang (javascript problem)

• Type: Bug
• Status: Closed
• Resolution: No Longer Reproducible
• Affects Version/s: 7.0.2 CE GA3, 7.0.0 DXP FP12
• Fix Version/s: Master
• Component/s: Frontend Infrastructure
• Labels:
  • QA-V
• Fix Priority: 3
• Bug Type: UX / Visual - Desktop

At least some SVG icons cause the browser window to hang when they are embedded into a page. The page becomes totally unresponsive and after a short while the browser ask if you want to stop the malfunctioning script. We noticed this issue when tried to embed icons in our theme using grunticon (Grunticon is a very common build tool).

Affected browsers (at least): Firefox, Chrome

 

We found the following simple steps to reproduce:

1) Start Liferay and log in as administrator
2) Create a new, empty page
3) Add a webcontent display to the page
4) Add webcontent, switch to source code view and insert the attached text into the webcontent. Note: An svg file is just a text file, you can open it and copy the text into the sourcecode window.

5) Save webcontent and close editor

 

Result: The page is unresponsive and hangs.
Debugging the script shows that the following function causes the problem:

   function svg4everybody(opts) {