解决Chrome中transform scale缩放后出现横向滚动条的问题

问题背景 #

给html元素设置transform: scale(0.5)配合width:200%做窗口适配时，Chrome会莫名出现横向滚动条，但Firefox完全正常。关键是内容DOM不受我们控制，不能直接用overflow-x:hidden——不然真有内容超出视口时，滚动条也会被错误隐藏。

复现代码 #

CSS代码 #

html {
  transform: scale(0.5);
  transform-origin: left top;
  width: 200%;
  height: 50%;
}

.parent {
  background: yellow;
}

HTML代码 #

<div class="parent">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta fermentum leo ut rutrum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras nibh augue, viverra ut purus id, aliquet hendrerit dui. Class
  aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque suscipit feugiat neque, nec convallis felis viverra sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar pulvinar arcu id iaculis. Vestibulum
  ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec faucibus imperdiet leo, tincidunt consectetur ante. Donec accumsan mauris vitae velit lacinia molestie. Nunc quis porttitor odio. Aenean sit amet nisl sem. Etiam ultricies
  arcu ut orci condimentum tempus. Aliquam eget purus nulla. Nullam elementum neque ut elit consequat varius. Cras facilisis faucibus diam, ac venenatis augue porttitor laoreet. Donec tincidunt arcu vel porttitor consequat. Vestibulum molestie urna id
  ipsum molestie suscipit. Aenean id finibus ex, venenatis sagittis ipsum. Cras id nibh pretium, dictum justo vehicula, pellentesque nunc. In rutrum, tellus at posuere bibendum, eros sapien pellentesque nisi, eu blandit mi nisi a mi. Quisque vitae nunc
  sed quam varius tincidunt id eget libero. Nunc id risus eget nisi molestie fringilla sit amet eget elit. Duis nec dolor porta massa elementum finibus a et nunc. In a augue vitae orci tempor placerat. Suspendisse at tempor metus, pharetra sodales arcu.
  Cras placerat facilisis odio vitae condimentum. Aenean sodales dapibus fermentum. Donec sem sapien, finibus vel ultrices vitae, finibus fermentum velit. Fusce ante massa, pulvinar sed blandit tempus, rhoncus at justo. Fusce varius justo sed arcu malesuada,
  vitae aliquet felis gravida. Integer sit amet dolor vitae libero blandit hendrerit. Mauris rutrum erat nec molestie tincidunt. Sed libero diam, blandit eu nisl at, sollicitudin pellentesque nunc. Quisque ac laoreet nisi. Vestibulum eu posuere odio,
  iaculis scelerisque quam. Morbi facilisis tellus non pulvinar faucibus. Nulla fringilla, velit nec feugiat fringilla, turpis sem pretium lectus, nec auctor arcu nisl ut felis. Cras eleifend efficitur commodo. In elit est, semper ut mauris non, dignissim
  suscipit ex. Sed sodales ac ex a consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur eget diam at nisl luctus tempus pellentesque ut nulla.
</div>

解决思路与代码 #

Chrome和Firefox对缩放元素的滚动条计算逻辑存在差异：Chrome会计算html缩放前的布局宽度，Firefox只认缩放后的视觉尺寸。要解决这个矛盾，同时不影响真实内容的滚动，可采用以下方案：

给body添加overflow-x:hidden，同时保持html的overflow-x:auto。这样既能切掉Chrome中因缩放产生的多余布局宽度，当内容真的超出视口时，html的滚动条仍能正常工作。

修改后的CSS代码：

html {
  transform: scale(0.5);
  transform-origin: left top;
  width: 200%;
  height: 50%;
  overflow-x: auto;
}

body {
  overflow-x: hidden;
  margin: 0; /* 去掉默认margin避免额外留白 */
}

.parent {
  background: yellow;
}

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