悬停时出现奇数像素 HTML SCSS

Question

检查我的 styles.If 我添加
.sort__button:hover .sort__cross{ background:hsla(180, 14%, 20%);}
悬停在我的样式中的行（尝试在中心增加点击次数）我的按钮在顶部出现奇怪的像素。如果没有那条线，像素就会消失并产生预期的结果。因此，如果有人发现我遇到了那个糟糕的像素以及如何修复它，请告诉我，这很烦人。

只出现在Chrome，我试过Firefox，一点问题都没有。

代码笔：https://codepen.io/jenbefishy/pen/oNeMmXY

HTML

 <button class="sort__button">
   <span class="sort__cross"></span>
</button>

SCSS

// reset
* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

// styles
body{
  height: 100vh;
  width: 100vw;
  display:flex;
  align-items:center;
  justify-content:center;
}
.sort__button{
  display: flex;
  align-items: center;
  border-radius: 5px;
  cursor: pointer;
  // Problem Line
  &:hover .sort__cross{
    background:hsla(180, 14%, 20%);
  }
 // ======
}
.sort__cross{
  width: 32px;
  height: 32px;
  background: hsl(180, 29%, 50%);
  display: block;
  position: relative;
  cursor: pointer;
  border-radius: 0 5px 5px 0;
  transition: all 150ms ease-in-out;
  // Cross 
  &:after, &:before{
    content: '';
    display: block;
    width: 4px;
    height: 20px;
    background: hsl(180, 52%, 96%);
    position: absolute;
    left: 14px;
    top: 6px;
  }
  &:after{
    transform: rotate(45deg);
  }
  &:before{
    transform: rotate(-45deg);
  }
}

View of that terrible pixel看右上角
Desired result 它需要看起来如何

Answer 1

我将 transform: translate3d(0,0,0); 添加到您的 .sort__button 定义中：

.sort__button {
  display: flex;
  align-items: center;
  border-radius: 5px;
  cursor: pointer;
  transform: translate3d(0,0,0); // added here

  // Problem line
  &:hover .sort__cross{
    background: hsla(180, 14%, 20%);
  }
}

看起来成功了！我从 this Whosebug post 得到灵感。使用 transform: translate3d(0,0,0); 将使 GPU 启动 CSS 过渡，使它们更平滑。

悬停时出现奇数像素 HTML SCSS

Odd pixel on hover HTML SCSS

html

css

sass