search

dash14 / v-network-graph

An interactive network graph visualization component for Vue 3
https://dash14.github.io/v-network-graph/
MIT License
495 stars 44 forks source link

Multiline label texts are incorrectly positioned in Safari #16

Closed ctrueblood-epri closed 2 years ago

ctrueblood-epri commented 2 years ago

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 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>.

Reference: https://stackoverflow.com/a/42023579
"Apparently, Safari wants the inner tspan have the dominant baseline set..."

dash14 commented 2 years ago

Hi @ctrueblood-epri, Thank you very much for your report. I have implemented the solution you suggested. Please check it out v0.3.7.