User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.63 Safari/537.36

Steps to reproduce:

Create a document that:

• Has an SVG that sets up symbols with their own ids
• Has an SVG that uses the symbol via xlink href
• Has text before and after the xlink SVG

I've attached a sample doc as firefox-bug.html

Note: the above process (a svg of symbols + xlink href to refer to the symbols) is the process that webpack uses to create svg sprites for reusable svg icons.

Now -- select the text from before the xlink SVG until after the xlink SVG.

Actual results:

Selection of the inline SVG works normally.
Selection stops abruptly once I try to cross the xlink SVG.

This behavior is non-deterministic. Sometimes I can make the selection, but most of the time it stops abruptly. The non-determinism may be connected to the speed of the mouse movement.

Expected results:

Selection should continue across the xlink SVG just as it would have for an inline SVG.

Mirko, do you know what's up here?

The same issue occurs with <use href, instead of <use xlink:href. The use of the latter is discouraged but both are still supported: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use#attributes.

The problem here is that <use internally uses Shadow DOM and selection across the Shadow DOM boundary isn't properly supported by Gecko/Firefox.

Chrome uses here Shadow DOM, too.

(In reply to Vinay from comment #0)

This behavior is non-deterministic. Sometimes I can make the selection, but most of the time it stops abruptly. The non-determinism may be connected to the speed of the mouse movement.

Workaround: to complete desired selection, move mouse in a such way that cursor is never crosses the SVG image. If cursor is upper or lower in intermediate states then temporary wrong par of line may be selected, but as soon as cursor is returned to the target line after passing SVG the selection becomes as the expected one, the image is ignored.