If you think a bug might affect users in the 57 release, please set the correct tracking and status flags for Release Management.

react-rendered tspan is invisible

RESOLVED INVALID

Status

()

Core
SVG
RESOLVED INVALID
3 years ago
3 years ago

People

(Reporter: flying sheep, Unassigned)

Tracking

35 Branch
x86_64
Linux
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

3 years ago
Created attachment 8575248 [details]
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

3 years ago
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.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 3 years ago
Resolution: --- → INCOMPLETE
(Reporter)

Comment 2

3 years ago
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)
Status: RESOLVED → UNCONFIRMED
Resolution: INCOMPLETE → ---
(Reporter)

Comment 3

3 years ago
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

3 years ago
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.
(Reporter)

Comment 5

3 years ago
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

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

Comment 7

3 years ago
    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.
(Reporter)

Comment 8

3 years ago
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

3 years ago
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.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 3 years ago3 years ago
Resolution: --- → INVALID
(Reporter)

Comment 10

3 years ago
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 :)
You need to log in before you can comment on or make changes to this bug.