Odd pixel on hover HTML SCSS-CodePudding

check up my styles.If I add
.sort__button:hover .sort__cross{ background:hsla(180, 14%, 20%);}
line in my styles on hover (try to multiply clicks in the center) my button gets odd pixel on the top. Without that line, the pixel disappears with the desired result. So if someone where I got that terrible pixel and how to fix it, tell me please, it's very annoying.

It happens only in Chrome, I tried Firefox, and there was no problem at all.

CodePen: 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 Look at the right top
Desired result How it needs to look

CodePudding user response：

I added transform: translate3d(0,0,0); to your .sort__button definition:

.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%);
  }
}

and it looks like that did the trick! I got the inspiration from this StackOverflow post. Using transform: translate3d(0,0,0); will kick the GPU into action for the CSS transitions, making them smoother.