在Safari上绘制的边Edge，不会显示箭头

[gillgong]

问题描述

在Safari上绘制的边Edge，不会显示箭头，Chrome上显示正常

重现链接

https://codesandbox.io/p/sandbox/thirsty-water-nhnv3l

重现步骤

graph.addEdge({
shape: 'edge',
sourece: [100, 100],
target: [500, 500],
attrs: {
line: {
sourceMarker: 'block', // 实心箭头
targetMarker: {
name: 'ellipse', // 椭圆
rx: 10, // 椭圆箭头的 x 半径
ry: 6, // 椭圆箭头的 y 半径
},
},
},
})

在Safari上绘制边，不会正常显示箭头

预期行为

期望在Safari上可以正常绘制带箭头的边

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox ...]
• X6 版本: [2.11.1 ...]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[x6-bot]

👋 @gillgong

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.
We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[XueMeijing]

或许是版本问题？我的safari v14.1.2可以正常显示你的demo

[Saganon0608]

@XueMeijing 我也出现了这个问题，在PC上的MAC OS系统没有问题，但是在移动端，无论是ipad还是iPhone，用safari或者edge都会存在这个问题。
https://x6.antv.antgroup.com/examples/edge/marker#native-markers。
用移动端的浏览器访问这个demo地址就能看到。如果一个边存在label这个属性，箭头就会消失。

[XueMeijing]

@XueMeijing 我也出现了这个问题，在PC上的MAC OS系统没有问题，但是在移动端，无论是ipad还是iPhone，用safari或者edge都会存在这个问题。 https://x6.antv.antgroup.com/examples/edge/marker#native-markers。 用移动端的浏览器访问这个demo地址就能看到。如果一个边存在label这个属性，箭头就会消失。

感觉很奇怪，在Iphone的safari下面第一次打开这个页面看不到箭头，如果回到上一个页面再返回回来，箭头就出现了，我试了下移动端的google也是一样的情况。

我本来以为箭头用到的marker-end像foreignObject一样是safari兼容问题 ( #4060 )，因为他mdn下面的浏览器兼容性是一堆问号，但是复制了svg节点和样式到服务器发现能正常展示 http://42.192.2.106/test.html ，也不知道什么原因导致的

[Saganon0608]

@XueMeijing 我也出现了这个问题，在PC上的MAC OS系统没有问题，但是在移动端，无论是ipad还是iPhone，用safari或者edge都会存在这个问题。 https://x6.antv.antgroup.com/examples/edge/marker#native-markers。 用移动端的浏览器访问这个demo地址就能看到。如果一个边存在label这个属性，箭头就会消失。

感觉很奇怪，在Iphone的safari下面第一次打开这个页面看不到箭头，如果回到上一个页面再返回回来，箭头就出现了，我试了下移动端的google也是一样的情况。

我本来以为箭头用到的marker-end像foreignObject一样是safari兼容问题 ( #4060 )，因为他mdn下面的浏览器兼容性是一堆问号，但是复制了svg节点和样式到服务器发现能正常展示 http://42.192.2.106/test.html ，也不知道什么原因导致的

是的 我跟你想的一样，以为是marker-end的兼容性问题，也把svg节点复制出来了，但是没有问题。
最后使用自定义边的方式就正常了。
graph.addEdge({
source: { x: 320, y: 60 },
target: { x: 380, y: 300 },
markup: [
{
tagName: 'path',
selector: 'p2',
},
{
tagName: 'rect',
selector: 'sign',
},
{
tagName: 'text',
selector: 'signText',
},
],
attrs: {
p1: {
connection: true,
fill: 'none',
stroke: '#237804',
strokeWidth: 6,
strokeLinejoin: 'round',
},
p2: {
connection: true,
fill: 'none',
stroke: '#73d13d',
strokeWidth: 4,
pointerEvents: 'none',
strokeLinejoin: 'round',
targetMarker: {
tagName: 'path',
fill: '#73d13d',
stroke: '#237804',
strokeWidth: 1,
d: 'M 10 -3 10 -10 -2 0 10 10 10 3',
},
},
sign: {
x: -20,
y: -10,
width: 50,
height: 20,
stroke: '#237804',
fill: '#73d13d',
atConnectionLength: 30,
strokeWidth: 1,
event: 'click:rect',
cursor: 'pointer',
},
signText: {
atConnectionLength: 34,
textAnchor: 'middle',
textVerticalAnchor: 'middle',
text: 'Token',
event: 'click:rect',
cursor: 'pointer',
},
},
})

[Jim-0]

Here is an one-time polyfill applied before graph rendered. Hope to help!

(function () {
    /// fix: invisible edge marker about Safari 16.5.1
    const targetNode = graph.mousewheel.target;
    const config = { attributes: true, subtree: true };
    const callback = (mutationList, observer) => {
      mutationList.forEach(mutation => {
        if ('attributes' != mutation.type) return;
        if ([
          'marker-start',
          'marker-mid',
          'marker-end',
        ].includes(mutation.attributeName)) {
          const { target } = mutation;
          const { parentElement } = target;
          parentElement.insertBefore(target, target.nextElementSibling);
        };
      });
    };
    const observer = new MutationObserver(callback);
    observer.observe(targetNode, config);
    // observer.disconnect();
  })();

[lck671]

我也碰到这个了问题，我用的是1.X. 在图形渲染完之后给svg设置一下竟然可以。
`
<div id="container"></div>

// 在渲染完之后执行，竟然可以。不知道为什么？难道是重绘？
document.querySelector('#container svg').innerHTML = document.querySelector('#container svg').innerHTML;
`

[gitzjy]

我也遇到了，边上有 label 的时候剪头就消失了 然后没有 label 箭头可以展示 但是如果动态修改箭头类型不会及时变化

[debuggerccai]

我发现在tabList场景下，从流程图tab切换到其他tab，再切换回流程图tab，箭头正常渲染了。所以主动触发一次回流就能解决。

setTimeout(() => {
const element = document.querySelectorAll('.x6-graph')[0];
element.style.display = 'none';
element.offsetHeight; // 访问布局属性
element.style.display = 'block';
}, 200);