Chrome中scaleX属性搭配backgroundColor出现异常表现的问题

通过transform: scaleX(100)将宽度1px的粉色div缩放至100px时，Chrome浏览器中该元素的背景色无法填满整个缩放后的区域，但浏览器元素检查显示尺寸为100px；Firefox中表现符合预期。

复现代码 #

import "./styles.css";

export default function App() {
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        width: "100vw",
        height: "100vh",
        alignItems: "center"
      }}
    >
      <div
        style={{
          position: "relative",
          width: "100px",
          height: "100px",
          backgroundColor: "red"
        }}
      >
        <div
          style={{
            position: "absolute",
            height: "10px",
            width: "1px",
            backgroundColor: "pink",
            left: 0,
            bottom: 0,
            transformOrigin: "left",
            transform: "scaleX(100)"
          }}
        />
      </div>
    </div>
  );
}

问题原因 #

这是Chrome与Firefox对CSS变换渲染的细节差异导致的。当对极小宽度元素做大幅横向缩放时，Chrome的渲染引擎在处理背景色铺展逻辑时，未正确跟随变换后的尺寸重新计算，出现了背景填充不完整的渲染异常。

解决方案 #

方案1：直接设置目标宽度（推荐） #

放弃使用scaleX变换，直接将元素宽度设置为目标尺寸100px，从根源避免渲染差异：

<div
  style={{
    position: "absolute",
    height: "10px",
    width: "100px",
    backgroundColor: "pink",
    left: 0,
    bottom: 0
  }}
/>

方案2：触发硬件加速修正渲染 #

给缩放元素添加translateZ(0)，强制Chrome启用硬件加速，修正背景渲染异常：

<div
  style={{
    position: "absolute",
    height: "10px",
    width: "1px",
    backgroundColor: "pink",
    left: 0,
    bottom: 0,
    transformOrigin: "left",
    transform: "scaleX(100) translateZ(0)"
  }}
/>

方案3：强制背景尺寸铺满 #

显式设置background-size: 100% 100%，强制背景色铺满变换后的整个元素区域：

<div
  style={{
    position: "absolute",
    height: "10px",
    width: "1px",
    backgroundColor: "pink",
    left: 0,
    bottom: 0,
    transformOrigin: "left",
    transform: "scaleX(100)",
    backgroundSize: "100% 100%"
  }}
/>

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