When using Safari browser on iPhone or Mac computer, if a text label is multiple lines (i.e., contains \n) then the entire label is shifted upwards when rendered on the graph (assuming label direction = south).
When a <tspan> is rendered in Safari, it does not seem to inherit the dominant-baseline attribute from the parent <text> element. Chrome, Firefox, and Edge do not seem to have this issue.
Proposed Solution
Consider setting dominant-baseline directly on <tspan> in addition to <text>.
Problem
When using Safari browser on iPhone or Mac computer, if a text label is multiple lines (i.e., contains
\n
) then the entire label is shifted upwards when rendered on the graph (assuming label direction = south).Likely Cause
https://github.com/dash14/v-network-graph/blob/4e91d30d6912a56697de8f693c4f3042c881d372/src/components/label-text.vue#L156-L161
When a
<tspan>
is rendered in Safari, it does not seem to inherit thedominant-baseline
attribute from the parent<text>
element. Chrome, Firefox, and Edge do not seem to have this issue.Proposed Solution
Consider setting
dominant-baseline
directly on<tspan>
in addition to<text>
.