ant-design windows上chrome浏览器升级到最新版本(128.0.6613.85),zoom缩放的情况下,下拉和dropdown组件选项偏移不对,导致被遮蔽或者无选项或者有偏移

eblbsuwk  于 3个月前  发布在  Windows
关注(0)|答案(6)|浏览(92)

https://4x.ant.deign/components/select-cn

Steps to reproduce

设置body的zoom成0.8

What is expected?

windows上chrome浏览器升级到最新版本(128.0.6613.85),zoom缩放的情况下,下拉和dropdown组件选项偏移不对,导致被遮蔽或者无选项或者有偏移

What is actually happening?

windows上chrome浏览器升级到最新版本(128.0.6613.85),zoom缩放的情况下,下拉和dropdown组件选项偏移不对,导致被遮蔽或者无选项或者有偏移
| Environment | Info |
| ------------ | ------------ |
| antd | 4.24.16 |
| React | 18 |
| System | windows |
| Browser | chrome 128.0.6613.85 |

kzmpq1sx

kzmpq1sx1#

参考这个
#49640 (comment)

mtb9vblg

mtb9vblg2#

参考这个 #49640 (comment)
chrome新版本128.0.6613.85版本下,使用transform也一样, https://4x.ant.deign/components/select-cn官网上设置一下就知道了

zzzyeukh

zzzyeukh3#

@JornyWang 需要升级到 5.x 上,5.x 解决了 transform 下的浮层组件定位问题。

qpgpyjmq

qpgpyjmq4#

@JornyWang 需要升级到 5.x 上,5.x 解决了 transform 下的浮层组件定位问题。

5很多组件方法都变了,有些老项目根本升不上去的

bvhaajcl

bvhaajcl5#

我也遇到这个问题了,请问你现在有解决这个问题的办法吗

iugsix8n

iugsix8n6#

看起来5.X确实没问题
不过我们这边用的antd-design-vue 1.x
目前临时的解决方案是 判断浏览器版本 大于等于128的把组件的getPopupContainer绑定到body上 小于128继续不变绑定到父元素上

function getPopupContainer(triggerNode) {
  const userAgent = navigator.userAgent;
  const index = userAgent.indexOf('Chrome/')
  const chromeVersion = userAgent.substring(index + 7);
  const versionParts = chromeVersion.split(' ');
  const majorVersion = parseInt(versionParts[0], 10);

  if (index > -1 && majorVersion >= 128) {
    return document.body
  }
  return triggerNode.parentNode
}

相关问题