CODEWITHSUNDEEP
htmlgoogle-chromesvg
j0ker
j0ker

Reputation: 4139

HTML5 - SVG Text Selection Bug in Chrome?

I am developping a web application in HTML5, using SVG to draw paths and text. Testing with Chrome on OS X, I came across some quite ugly behavior which seems to be a bug in Chrome.

Consider the following minimal example of SVG text crossed by a path:

<svg height="200" width="200">
    <text x="50" y="50" fill="#000" font-size="50" style="pointer-events: none;">
        <tspan x="5" dy="0">Test Text</tspan>
    </text>
    <path d="M 0 0 L 100 100" stroke="#000" stroke-width="5"></path>
</svg>

(http://jsfiddle.net/wPYvS/)

I don't want the SVG text to be selected (or highlighted) when dragging over it with the cursor. So I added the CSS attribute "pointer-events: none", which works as expected in all browsers except Chrome. In Chrome, when you are dragging over text only, nothing is selected. But If you are dragging over text where a path is in the way (so, actually you are dragging over the path), the text is highlighted.

I was able to reproduce this in Chrome and OS X and Windows but not with Firefox, Opera or Safari.

Is there some workaround I could use to prevent the text selection completely in all browsers?

Thanks in advance!

Upvotes: 6

Views: 4638

Answers (2)

user2188875
user2188875

Reputation:

::selection is useful to style the select color with background and color. While ::selection { background: none; } works, selections are still enabled but "masked" with no background color.

The right way to actually disable selections is to use user-select: none.

#div, .class {
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
}

Reference here.
Your JSFiddle updated.

Upvotes: 3

Evan Larsen
Evan Larsen

Reputation: 9965

You can set the selection highlight color with a css pseudo selector.

svg text::selection { background: none; }

reference here.

Upvotes: 9

Related Questions