chrome128更新zoom导致组件缩放问题

前几天，一个项目里的好好的大屏页面，下拉菜单 直接偏移很远…远….

chrome128版本更新zoom变化

分析问题

突然出现的样式问题，让人捉摸不透，逐一分析原因:

• 代码被更改,布局乱了?

  因为下拉菜单的弹出层是需要写定位的，查看代码发现，并没有变更；相关布局代码也没有修改.

• 依赖升级，组件库更新了?

  查看package.json/package-lock.json 并无修改

• 大屏zoom缩放导致？

  将缩放的相关js代码屏蔽，下拉恢复正常

• google更新导致？

  测试反馈，他的火狐浏览正常，谷歌浏览器出现偏移问题。那看来问题还是出现在浏览器上。通过比对发现,chorme128版本及以上出现这个问题;

  谷歌官方更新日志查看,发现128版本确实更新了标准化 CSS zoom 属性,那么“罪魁祸首”就找到了

  

• ant-design-vue 组件库没有兼容？

  • 由于我使用的是ant-design-vue 3版本,猜想更高版本是否已经解决了这个问题。经过测试ant-design-vue 4 也有此问题;ant-design-react 5版本却并无问题，猜想是做了兼容处理或者采用新的定位逻辑；
  • 综上，应该就是zoom变化导致的定位出现问题，除了下拉菜单，其他需要弹出定位的组件有此问题吗？有的有的，全部都乱了，整个晋察冀都乱了。
  • 接下来就得去找找同路人，哎，github上 相关issue已经有了,就喜欢这种IT人爱问爱学习的氛围(抄答案)；

解决问题

下面是解决方案，参考了网上大佬们的方案，再结合自己的实际情况优化了一下:

//zoomPlugin.js

const isChromeHighVersion = () => {
  const ua = navigator.userAgent.toLowerCase();
  const chromeIndex = ua.indexOf('chrome');
  if (chromeIndex > -1) {
    const version = ua.substring(chromeIndex + 7);
    const majorVersion = parseInt(version.split('.')[0], 10);
    return majorVersion > 127;
  }
  return false;
};

const excludeSelector = [
  // '#map-modal-mark',
]

//传入 元素选择器,指定元素下重写获取元素属性的方法
export function zoomPlugin(querySelector) {
  const originalGetBoundingClientRect = Element.prototype.getBoundingClientRect;
  if (!isChromeHighVersion()) {
    return;
  }
  Element.prototype.getBoundingClientRect = function () {
    const rect = originalGetBoundingClientRect.call(this);

    let zoom = 1;
    //如果当前元素是在 缩放的元素之下 且没有在排除列表excludeSelector内,才应用下面的逻辑.没有使用zoom缩放
    if( document.querySelector(querySelector)?.contains(this) && !excludeSelector.some(it=>document.querySelector(it)?.contains(this)) ){
      zoom = Number(document.querySelector(querySelector)?.style?.zoom || 1);
    }else{
      zoom = 1
    }

    const newRect = new DOMRect(
      rect.x / zoom,
      rect.y / zoom,
      rect.width / zoom,
      rect.height / zoom
    );
    return newRect;
  };
}

需要注意的是:因为是直接重写的Element的getBoundingClientRect方法，所以只要运行了就会一直有效了，不能再重复执行，否则会导致元素获取定位信息(x,y等)再次偏移;所以，我直接在 mani.js 里面执行的此方法,页面刷新才再次执行，不会重复执行。

//针对大屏下的元素zoom偏移问题
//这里传入的 css selector:.bigscreen-bg 就是你执行zoom缩放的那个元素
zoomPlugin('.bigscreen-bg');

总结一下

由于之前 css:zoom是非标准化属性,组件库方面就没有做太多兼容处理，导致在弹出层定位问题上，出现偏差。这次chrome128版本更新，估计好多前端大屏项目都受到了影响;最后,咱们前端开发还是得多多关注谷歌浏览器的更新日志才行额！！！