1141495 - react-rendered tspan is invisible

Status: RESOLVED INVALID

(Core :: SVG, defect)

Description

[flying sheep]

Attachment: tspan-bug.svg

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:36.0) Gecko/20100101 Firefox/36.0
Build ID: 20150305221847

Steps to reproduce:

In my application, the third tspan doesn’t get rendered.

i can reproduce it in my (extensive) webapplication, but not by copying the markup (attached)

in the webapp, the first tspan is 0×0 when hovered in the inspector, the second has its proper size (like 50×18 or something), and for the third, no inspector info is displayed

Comment 1

[Robert Longson [:longsonr]]

We're going to need a testcase. I imagine you're creating it in the wrong namespace but it's impossible to tell without a testcase. Do reopen this bug if you can provide one.

Comment 2

[flying sheep]

here you go: http://jsbin.com/tisuma/3/edit

please take it seriously, as i did it mostly for firefox (it took me quite some time, and a workaround would have been much easier)

Comment 3

[flying sheep]

oh, sorry, this was missing a instruction manual: you have to hover the right of the two dots.

the left dot+text is rendered in exactly the same way, only from the beginning instead of after hover.

on the right side, the “2” will be missing, although it exists in the DOM (use the inspector to verify). that’s the bug.

Comment 4

[Robert Longson [:longsonr]]

If I change lines to

		var lines = ['1', '2'];

then I get 1, 2 in both cases (all the time). I suspect therefore, if there is a bug at all, it isn't in tspan.

Comment 5

[flying sheep]

eh wat?

the test case demonstrates the bug. so avoiding to trigger it serves to do what exactly?

besides: the tspan is there. look: http://jsbin.com/tisuma/6/edit?html,js,console,output

this will print the number of tspans after the component updates. it will print 4 if hovered, which proves the tspan is there.

Comment 6

[Robert Longson [:longsonr]]

Yes there are 4 tspans, the 4th has no content though.

Comment 7

[Robert Longson [:longsonr]]

    componentDidUpdate: function() {
        var tspans = this.getDOMNode().querySelectorAll('tspan')
        for (i = 0; i < tspans.length; ++i) {
  console.log(tspans[i].textContent);
}
    }

Indicates that the 4th tspan has no content.

Comment 8

[flying sheep]

except that it does for me: http://jsbin.com/tisuma/8/edit?html,js,console,output

output on mouse enter:

["1", "2", "1", "2"]

on mouse exit:

["1", "2", ""]

Comment 9

[Robert Longson [:longsonr]]

As I suspected react is creating elements in the wrong namespace

for (i = 0; i < tspans.length; ++i) {
  console.log(tspans[i].namespaceURI);
}

indicates one of the tspans has been created in the xhtml namespace somehow.

Comment 10

[flying sheep]

OK, thanks! i couldn’t imagine that would happen, but obviously it did.

good thing that despite wrong assumptions on both ends, you still found the culprit :)