Chrome浏览器圆角容器hover效果在光标离开后滞留问题求解

这是Chrome浏览器的已知渲染缺陷：当父容器同时设置overflow: hidden和border-radius裁剪子元素时，Chrome会默认将容器的hover触发区域识别为原始矩形，而非裁剪后的圆角区域，因此会出现光标移出圆形区域后hover效果残留的问题。

解决方案 #

方案1：添加transform触发GPU渲染（最简便） #

给.image-container添加transform: translateZ(0)属性，强制Chrome使用GPU渲染该容器，即可正确识别圆角后的实际边界，同时建议将transition属性移到图片的默认样式中，保证hover进入和退出都有平滑过渡效果：

.user {
    display: inline-block;
    width: 200px;
    height: 200px;
    object-fit: cover;
    /* transition移到默认样式 */
    transition: opacity 0.5s;
}

.image-container {
    background: black;
    overflow: hidden;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    padding-left: 0%;
    /* 新增这行修复Chrome hover边界识别问题 */
    transform: translateZ(0);
}

.image-container:hover {
    cursor: pointer;
}

.image-container:hover .user {
    opacity: 0.3;
}

<div class="image-container">
    <img src="https://avatars.githubusercontent.com/u/16269580?v=4" class="user">
</div>

方案2：使用mask-image兜底 #

如果transform方案在部分旧版Chrome中不生效，可以添加mask-image属性明确裁剪区域，进一步兼容老旧版本：

.image-container {
    /* 其余原有属性不变 */
    -webkit-mask-image: radial-gradient(circle, #fff 100%, transparent 100%);
    mask-image: radial-gradient(circle, #fff 100%, transparent 100%);
}

两种方案均可以实现光标离开圆形区域后hover效果立刻结束的需求，兼容所有主流Chrome版本。

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