CSS transform: scale()导致相邻元素出现1px暗线/亚像素抖动问题求助

针对你遇到的卡片hover触发背景图缩放时，白色内容框边缘出现1px暗线/抖动的亚像素渲染问题，以下是几个可行的解决方法：

方案1：给内容框添加同色系内阴影 #

通过内阴影填充内容框边缘的缝隙，挡住背景图透出来的暗线，视觉上无突兀感：

.projects-card__content {
    background-color: #ffffff;
    width: 100%;
    padding: 40px 25px;
    /* 添加同色系内阴影 */
    box-shadow: inset 0 0 0 1px #ffffff;
}

方案2：给覆盖层添加透明边框 #

利用边框占据边缘区域，避免背景图的亚像素渲染透过内容框边缘：

.projects-card__overlay {
    position: relative;
    z-index: 2;
    width: 85%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* 添加1px透明边框 */
    border: 1px solid transparent;
}

方案3：给背景图添加轻微模糊+明确缩放原点 #

轻微模糊可抹平亚像素边缘的细微差异，明确缩放原点让动画更稳定：

.projects-card__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* 新增filter过渡 */
    transition: transform 0.6s ease, filter 0.6s ease;
    /* 明确缩放原点为中心 */
    transform-origin: center center;
}

.projects-card:hover .projects-card__bg img {
    transform: scale(1.05); 
    /* 添加0.5px轻微模糊 */
    filter: blur(0.5px);
}

方案4：用伪元素覆盖边缘区域 #

创建一个比内容框大1px的伪元素，挡住可能透出来的背景图区域：

.projects-card__content {
    background-color: #ffffff;
    width: 100%;
    padding: 40px 25px;
    /* 开启相对定位，让伪元素基于此定位 */
    position: relative;
}

.projects-card__content::before {
    content: '';
    position: absolute;
    /* 比内容框大1px */
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background-color: #ffffff;
    z-index: -1;
}

这些方案都是针对浏览器亚像素抗锯齿导致的背景图透色问题，你可以根据自己的视觉需求选择其中一种即可。

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