使用CSS transform: scale属性时出现异常线条的问题求助

成因分析 #

你遇到的异常线条是亚像素渲染误差导致的：

• 当使用transform: scale(0.85)缩放容器时，容器内的伪元素及其背景渐变会被同步缩放。
• 你设置的背景渐变尺寸（15px 32px）和渐变断点（16px），在缩放后会变成非整数像素值。
• 浏览器渲染非整数像素的渐变背景时，会产生细微的半透明间隙或线条，也就是你看到的异常线条。
• 你之前尝试的边框调整、渐变角度修改等操作，都没有触及缩放带来的背景像素对齐核心问题。

解决方案 #

推荐以下几种解决思路：

1. 启用GPU加速减少渲染误差

给缩放的容器添加backface-visibility: hidden，强制浏览器使用GPU渲染，可有效降低亚像素误差：

.allsocial__premium-container {
    transform: scale(0.85);
    transform-origin: 10% 50%;
    backface-visibility: hidden;
}

2. 反向调整背景参数适配缩放比例

根据缩放比例反向计算背景尺寸和渐变断点，让缩放后的值尽量接近整数：
比如按1/0.85的比例调整背景参数（取近似整数值）：

.allsocial__premium-price:after {
    background: linear-gradient(-45deg, #ffffff 19px, transparent 0), linear-gradient(45deg, #ffffff 19px, transparent 0);
    background-size: 18px 38px;
    /* 其他原有属性保持不变 */
}

3. 改用SVG实现锯齿图案（最稳定方案）

SVG是矢量图形，缩放不会产生像素误差，替换CSS渐变为SVG背景：

.allsocial__standard-price:after, .allsocial__basic-price:after, .allsocial__premium-price:after {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="32"><path d="M0 32 L15 16 L0 0 Z" fill="%23ffffff"/></svg>');
    background-repeat: repeat-x;
    background-position: left bottom;
    content: " ";
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 32px;
}

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