circos view breaking

[yannickwurm]

https://www.loom.com/share/6d87effb48bf470198504dd9dade8cd8?sid=70163c83-1873-43ae-bb6d-01661e38081e

[joko3ono]

@yannickwurm , could you confirm if this issue occurs only in Safari?

Here's what I discovered on Safari:
https://github.com/user-attachments/assets/8e6bc269-ea0b-468f-88be-14a178a6536d

On Firefox and Chrome, it works as expected.

Initially, I thought the issue was due to CircosJS, so I rewrote Circos from scratch using D3. Here are the results:

Screen.Recording.2024-12-02.at.14.57.51.mov

@tadast , do you have any recommendations?

[tadast]

@joko3ono could you please share that HTML from the minimal reproduction case? I'd be curious to inspect the SVG and see if there SVG paths generated on safari is different (this would indicate an issue with JS that generates SVG), or is it the same and safari just renders it differently (a problem with SVG rendering). The next thing I'd check is if there's anything overlaying over the shape where it looks cut-off or is it just not rendering fully.

If you have the HTML we could also raise an issue on the CircosJS gh repo (although it does not look very active).

[joko3ono]

@tadast please change the extension to html, Github doesn't support upload a html file, so I rename it to txt

I think the problem is not the CircosJS, in my sample circos.html, it doesn't use circos js, just the d3 ribbon

sample-circos.txt

[joko3ono]

@tadast found this tools to inspect the SVG

https://jakearchibald.github.io/svgomg/