Page crash/freeze/hang on Chomium-based browsers

[steven-work-space]

Recently, many users told us that using the paragraph menu crashed their browser's tab. We noticed that the problem is also happening from the demo page. We have made many attempts and have had no problems with Mac OS. The problems seem to happen with Windows 10 whether it is on Edge or Chrome.

Description

Relevant details according to the context:

• Windows 10
• Edge Lastest; Chrome Lastest
• 1920 x 1080

How to reproduce?

On Windows 10, Chrome Lastest (or other), on https://alex-d.github.io/Trumbowyg/

• Select text
• Click on Paragraph menu
• Select Header 1 for example

You may need to do many attempts to see the bug happen. No console error.

[kiewietr]

Im having the same issues. Its not only the paragraph menu but dropdowns in general it seems. Its caused by chromium version 95+ (which is the latest prod build) so chrome, brave, edge etc all have the issue. Ive tested on chromium 94 which is working as expected. Ive tested on the latest chromium dev build v97 which is also having the same issue.

Im still in the process of debugging, but havent found a cause yet.

[Alex-D]

Hey! I'm open to review a PR if you have a fix ; I will not be able to check this by myself before Saturday or Sunday.

[kiewietr]

It seems to be related to the svg icon rendering of the buttons in the dropdowns. If I change the html part of the return statement of this function https://github.com/Alex-D/Trumbowyg/blob/b89d84629412a43b92e070f20f58218d5c92751b/src/trumbowyg.js#L878-L908 to something like

html: (btn.text || btn.title || t.lang[btnName] || btnName),

(so basically removing all svg / icon rendering) the crash isnt happening anymore. Updating the deprecated xlink:href to href isnt fixing the issue. Still investigating further.

[johanrosenson]

This problem is not only on Windows, also Mac OS is affected.

I can confirm that the workaround posted by @kiewietr works, tested on MacOS and Edge 95.

[kiewietr]

After some more testing its not because of the svg but because of the combination with <use xlink:href ... />. I dont know why tho.

[Alex-D]

I can't reproduce the bug on Chrome, but I can on Edge. That's really strange.

[ghost]

I use chromium based browser ( Brave ) on MacOS with M1 chip and I can confirm that the page crashes

[MWelkerH]

as @kiewietr wrote, its probably the xlink:href problem, see (https://css-tricks.com/on-xlinkhref-being-deprecated-in-svg/). Maybe replacing <use xlink:href ... /> by <use href ... /> could solve the problem.

[messalas]

I have the same issue, i hope it will be fixed soon

[MWelkerH]

Replacing <use xlink:href ... /> by <use href ... /> seems not to solve the problem.

[IvanDreamer]

I can confirm same behaviour on Chrome, but not on Firefox and Safari. When I click any dropdown the page is freezing and crashing. What would be the fix for it?

[Alex-D]

Maybe try this for now:

.trumbowyg-dropdown button svg {
    display: none;
}

[messalas]

On initialization $('.html-editor').trumbowyg({...});, I deleted the option ['formatting'] and it works also, till a solution is found.

[IvanDreamer]

Maybe try this for now:

.trumbowyg-dropdown button svg {
    display: none;
}

Thank you! It works .)

[chaffeqa]

This is happening on OSX Chrome as well.

I can reproduce every time by typing text, then highlighing a word, and clicking the "Insert Link" dropdown. After hovering over the first option, the page hangs forever

Edit: solution proposed by @Alex-D works for me too

[rainerborene]

I can reproduce this bug on Browserstack using Windows 10 and Chrome 96.0.4664.18 (Official Build) (64-bit).

Edit: It seems that the solution proposed by @Alex-D works for now.

[TFleury]

Chromium bug here It seems to have been fixed today, but I don't know when it will be available in our browsers.

[Alex-D]

No feedback since a more than a year, I think I can tell that this is fixed :)