Chrome浏览器hover修改元素背景时按钮顶部出现多余像素问题求助

问题原因 #

这个异常是Chrome浏览器的已知渲染bug，触发条件为父子元素同时设置border-radius、子元素启用过渡动画，且hover时触发子元素背景色修改，此时Chrome对边缘的抗锯齿计算出错，会生成多余的半透明像素点。Firefox的渲染逻辑与Chrome不同，因此不会复现该问题。

修复方案 #

你可以任选以下任意一种方案解决问题：

• 方案1：给父元素.sort__button添加overflow: hidden属性。父元素本身设置了border-radius，开启溢出裁剪后，子元素边缘超出父容器的异常渲染像素会被直接裁掉，改造成本最低。
  示例代码：

  .sort__button{
    display: flex;
    align-items: center;
    border-radius: 5px;
    cursor: pointer;
    overflow: hidden; /* 新增这行 */
    &:hover .sort__cross{
      background:hsla(180, 14%, 20%);
    }
  }
  

• 方案2：移除父元素.sort__button的border-radius属性。当前圆角效果完全可以通过子元素.sort__cross的border-radius: 0 5px 5px 0实现，父元素不需要额外设置圆角，从根源上避免两层圆角叠加渲染的问题。
• 方案3：将子元素的全局过渡修改为仅过渡需要变化的属性，把.sort__cross的transition: all 150ms ease-in-out改为transition: background 150ms ease-in-out，减少不必要的属性过渡带来的渲染开销，规避渲染异常。
• 方案4：给.sort__cross添加will-change: background属性，提前通知浏览器该元素会有背景色变化，让浏览器预先分配渲染资源，避免过渡时的计算错误。

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