CSS中zoom属性的替代方案？transform: scale()能否实现zoom同等效果

zoom与transform: scale()的核心差异 #

两者表现不一致的根本原因是渲染逻辑不同：

• zoom 会修改元素的实际布局尺寸：缩放后元素会重新计算自身在文档流中的占位，父容器会跟随元素的新尺寸自适应调整，不会残留多余空白
• transform: scale() 仅做视觉层面的缩放：元素在文档流中的原始占位完全不变，缩放后不会影响父容器尺寸，因此会出现外层main_div保留原始大小的问题

用transform模拟zoom一致表现的方案 #

要对齐zoom的行为，需要额外处理布局占位的适配，步骤如下：

1. 给需要缩放的元素新增一层外层容器，专门用来控制缩放后的布局占位
2. 缩放内层元素时，同步按比例修改外层容器的宽高，抵消transform不改变布局的特性

代码实现示例 #

HTML代码

<div id='main_div'>
  <!-- 新增外层占位容器 -->
  <div class="scale_wrap">
    <div id="second_div">Hello</div>
  </div>
</div>
<input class="test_button" type="button" name="button_name" value="test">

CSS基础样式

.scale_wrap {
  display: inline-block;
  /* 缩放原点对齐左上角，和zoom默认行为一致 */
  transform-origin: left top;
  overflow: hidden;
}

JavaScript代码

let test_button = document.querySelector('input.test_button');
let scaleWrap = document.querySelector('.scale_wrap');
let secondDiv = document.querySelector('#second_div');
const scaleRatio = 0.5;

test_button.addEventListener('click', () => {
  // 获取元素原始尺寸
  const originWidth = secondDiv.offsetWidth;
  const originHeight = secondDiv.offsetHeight;
  // 内层元素做视觉缩放
  secondDiv.style.transform = `scale(${scaleRatio})`;
  secondDiv.style.transformOrigin = 'left top';
  // 外层容器修改尺寸，匹配缩放后的实际占位，对齐zoom的布局效果
  scaleWrap.style.width = `${originWidth * scaleRatio}px`;
  scaleWrap.style.height = `${originHeight * scaleRatio}px`;
});

跨浏览器兼容最佳实践 #

可以结合特性判断做分级实现，兼顾性能和兼容性：

• 优先使用原生zoom属性，性能最好，实现成本最低
• 针对Firefox等不支持zoom的浏览器，用@supports做特性检测，降级使用上述transform模拟方案
  示例CSS兼容写法：

#second_div {
  zoom: 0.5;
}
/* 仅不支持zoom的浏览器会命中该规则 */
@supports not (zoom: 1) {
  #second_div {
    transform: scale(0.5);
    transform-origin: left top;
  }
  /* 配合上述JS逻辑修改外层容器尺寸即可 */
}

内容的提问来源于stack exchange，提问作者Manu