Chrome 125.0.6422.142元素hover跳动问题原因及修复方法咨询

问题原因 #

Chrome 125.0.6422.142版本的渲染引擎更新后，在绝对定位元素+transform过渡+父元素内容溢出的组合场景下出现了渲染异常。具体到你的代码中：

• 全局样式给所有元素强制设置了overflow: visible，导致高度仅53px的.content容器无法限制子元素.coin（高度100px）的溢出范围
• 当hover触发.coin2的transform: translateY(-5px)过渡时，新版本Chrome的布局计算逻辑出现偏差，意外触发了父元素.content的不必要重排，进而带动整个元素组出现跳动。旧版本Chrome的渲染逻辑未引入此计算偏差，因此无该问题。

修复方案 #

方案一：移除全局冗余样式（优先推荐） #

全局强制设置overflow: visible属于冗余操作（元素默认overflow即为visible），且会干扰容器对溢出元素的渲染计算。修改全局样式：

*, ::before, ::after {
    padding: 0;
    margin: 0;
    /* 移除overflow: visible */
    font-family: "Arial", sans-serif;
    background-color: rgba(0, 0, 0, 0);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: contain;
}

方案二：添加渲染优化提示 #

如果需要保留全局overflow设置，可给.coin和.coin2添加will-change: transform，告诉浏览器提前优化该元素的transform渲染，避免触发意外重排：

.coin {
    position: absolute;
    top: -1px;
    left: 51px;
    width: 100px;
    height: 100px;
    background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ9CeiTPT1QNO0MG0VSpIXDKn80XXs8rTaDAA&s);
    transition: transform .3s;
    will-change: transform; /* 添加此行 */
}

方案三：调整容器尺寸适配子元素 #

修改.content的高度，使其能完全容纳子元素，消除溢出场景：

.content {
    position: absolute;
    top: 0;
    left: 0;
    transition: transform .35s;
    width: 81px;
    height: 100px; /* 从53px改为100px */
}

以上三种方案均可解决hover时的元素跳动问题，优先推荐方案一，因为全局冗余样式是引发问题的根源。

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