The issue has been closed

页面通过zoom缩放后，通过悬浮动态添加的DIV，鼠标focus定位不准了 #4679

leadtoit posted onGitHub

问题描述

为了解决vue3页面适配不同分辨率页面，通过如下方式实现页面devicePixelRatio（设备像素比例）变化后，计算页面body标签zoom修改其大小，来抵消devicePixelRatio带来的变化。 document.getElementsByTagName('body')[0].style.zoom = 1 / window.devicePixelRatio;

但这样后，通过悬浮动态添加的DIV，鼠标focus定位不准了

重现链接

https://codesandbox.io/s/devicepixelratio-bug-4n2xt9?file=/index.js

重现步骤

1、进入页面 2、鼠标移到node-0节点，期望显示动态添加的DIV（Custom Content），但未能显示 3、鼠标稍微向右下方移动，成功显示了DIV

预期行为

我期待鼠标移到node-0节点时，显示DIV，但未能显示，必须鼠标再向右下方移动才能显示

平台

操作系统: [ Windows]
网页浏览器: [Google Chrome]
G6 版本: [4.6.4]

屏幕截图或视频（可选）

https://github.com/antvis/G6/assets/1585483/98c2e5e1-1792-4b6f-a80d-314f031e2ec9

补充说明（可选）

No response

document.getElementsByTagName("body")[0].style.transform = scale(${1 / 1.5}); graph.get("canvas").set("supportCSSTransform", true); graph.data(data); graph.render();

posted by GemT27 almost 2 years ago

https://github.com/antvis/G/issues/183 #3412 得把zoom换成transform使用吧 <del>document.getElementsByTagName("body")[0].style.zoom = 1 / 1.5;</del> document.getElementsByTagName("body")[0].style.transform = `scale(${1 / 1.5})`;

posted by GemT27 almost 2 years ago

建议不要 scale 容器哈，用 graph 的缩放来达到目的

posted by Yanyan-Wang almost 2 years ago

This issue has been closed because it has been outdate for a long time. Please open a new issue if you still need help.

这个 issue 已经被关闭，因为 它已经过期很久了。如果你仍然需要帮助，请创建一个新的 issue。

posted by github-actions[bot] 10 months ago

Fund this Issue

$0.00

Funded

Pull requests

页面通过zoom缩放后，通过悬浮动态添加的DIV，鼠标focus定位不准了 #4679

问题描述

重现链接

重现步骤

预期行为

平台

屏幕截图或视频（可选）

补充说明（可选）

Company

Community

Support

Connect