safari下，antvx6的2.x版本使用React节点，所有节点的定位会异常

jiangxin829 commented 10 months ago

Describe the bug

https://x6.antv.antgroup.com/tutorial/intermediate/react 使用safari访问官方文档demo即可复现，react节点定位到左上角了

Your Example Website or App

https://x6.antv.antgroup.com/tutorial/intermediate/react

Steps to Reproduce the Bug or Issue

见描述

Expected behavior

兼容浏览器差异

Screenshots or Videos

No response

Platform

OS: [macOS]
Browser: [Safari]
版本16.6 (18615.3.12.11.2)

Additional context

No response

x6-bot[bot] commented 10 months ago

👋 @jiangxin829

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 commented 10 months ago

我查了下，这是一个webkit的bug，详情请见下面两个链接，上面说这个bug从2009年就开始了，如果修复的话可以找到这个progress元素，给他加上position: fixed

https://stackoverflow.com/questions/61895287/wrong-position-of-video-element-inside-svg-foreignobject-on-safari https://bugs.webkit.org/show_bug.cgi?id=23113

另外这里有最小复现的html也可以测试下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .react-node {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      border: 1px solid #8f8f8f;
      border-radius: 6px;
    }

    .ant-progress {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      color: #000000d9;
      font-size: 14px;
      font-variant: tabular-nums;
      line-height: 1.5715;
      list-style: none;
      font-feature-settings: "tnum", "tnum";
      display: inline-block;
    }

    .ant-progress-inner {
      width: 80px;
      height: 80px;
      font-size: 18px;
      position: relative;
      border-radius: 100px;
    }
  </style>
</head>

<body>
  <svg width="100%" height="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs></defs>
    <g transform="translate(260,50)">
      <foreignObject width="100" height="100">
        <div style="width: 100%; height: 100%;">
          <div class="react-node" style="background: pink;">
            <div class="ant-progress" style="background: blue;">
              <div class="ant-progress-inner" style="background: seagreen;">
                <span class="ant-progress-text" title="60%">60%</span>
              </div>
            </div>
          </div>
        </div>
      </foreignObject>
    </g>
  </svg>
</body>

</html>

jiangxin829 commented 4 months ago

我查了下，这是一个webkit的bug，详情请见下面两个链接，上面说这个bug从2009年就开始了，如果修复的话可以找到这个progress元素，给他加上position: fixed

https://stackoverflow.com/questions/61895287/wrong-position-of-video-element-inside-svg-foreignobject-on-safari https://bugs.webkit.org/show_bug.cgi?id=23113

另外这里有最小复现的html也可以测试下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .react-node {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      border: 1px solid #8f8f8f;
      border-radius: 6px;
    }

    .ant-progress {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      color: #000000d9;
      font-size: 14px;
      font-variant: tabular-nums;
      line-height: 1.5715;
      list-style: none;
      font-feature-settings: "tnum", "tnum";
      display: inline-block;
    }

    .ant-progress-inner {
      width: 80px;
      height: 80px;
      font-size: 18px;
      position: relative;
      border-radius: 100px;
    }
  </style>
</head>

<body>
  <svg width="100%" height="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs></defs>
    <g transform="translate(260,50)">
      <foreignObject width="100" height="100">
        <div style="width: 100%; height: 100%;">
          <div class="react-node" style="background: pink;">
            <div class="ant-progress" style="background: blue;">
              <div class="ant-progress-inner" style="background: seagreen;">
                <span class="ant-progress-text" title="60%">60%</span>
              </div>
            </div>
          </div>
        </div>
      </foreignObject>
    </g>
  </svg>
</body>

</html>

你好大佬，这个问题我按你的指引处理了一下，发现是因为position导致，但React节点内部需要使用相对/绝对定位能力，还有别的办法吗

XueMeijing commented 4 months ago

你好大佬，这个问题我按你的指引处理了一下，发现是因为position导致，但React节点内部需要使用相对/绝对定位能力，还有别的办法吗

其他办法我也不知道了，safari兼容性很差，我用的vscode编辑器有正则在safafi 14上也报错，懒得降级了

antvis / X6