Question

对我的元素应用transform：scale时，边框颜色变得混乱。是否想知道这是否是已知问题并且有解决方案？如果删除比例，动画将正常工作，并且边框恢复正常。当问题一直存在时，我也尝试过两种方法。尝试过缩放，转换起源，似乎没有什么可以解决这个奇怪的问题。铬也没有问题。
JSfiddle

body {
  background-color: lightblue;
}

.player-chromecast {
  border: 2px solid white;
  border-radius: 4px;
  width: 22px;
  height: 17px;
  position: relative;
  margin: 10px;
}

.player-chromecast:hover {
  transform: scale(1.1)
}

.broadcast {
  background-color: lightblue;
  width: 18px;
  height: 19px;
  position: absolute;
  bottom: -3px;
  left: -2px;
}

.broadcast:after {
  content: '';
  height: 5px;
  width: 5px;
  border-top-right-radius: 20px;
  position: absolute;
  top: 13px;
  background-color: white;
}

.reception {
  border: 2px solid white;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-top-right-radius: 20px;
  position: absolute;
}

.first-bar {
  height: 6px;
  width: 6px;
  top: 8px;
}

.second-bar {
  height: 11px;
  width: 11px;
  top: 3px;
}

<div class="player-chromecast">
  <div class="broadcast">
    <div class="reception first-bar"></div>
    <div class="reception second-bar"></div>
  </div>
</div>

Answer 1

body {
  background-color: #20262e;
}

h1 {
  color: white;
  text-align: center;
}
.player-chromecast:hover .reception {
    border-bottom-color: transparent;
    border-left-color: transparent;
}
p {
  font-family: verdana;
  font-size: 20px;
}

.player-chromecast {
border-left: 1px solid #fff !important;
border: 2px solid white;
border-radius: 4px;
width: 22px;
height: 17px;
position: relative;
margin: 10px;
border-bottom: 1px solid #fff !important;
}

.player-chromecast:hover {
  transform: scale(1.1)
}

.broadcast {
  background-color: #20262e;
  width: 18px;
  height: 19px;
  position: absolute;
  bottom: -3px;
  left: -2px;
}

.broadcast:after {
  content: '';
  height: 5px;
  width: 5px;
  border-top-right-radius: 20px;
  position: absolute;
  top: 13px;
  background-color: white;
}

.reception {
  border: 2px solid white;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-top-right-radius: 20px;
  position: absolute;
}

.first-bar {
  height: 6px;
  width: 6px;
  border-left: 0px;
  top: 8px;
}

.second-bar {
  height: 11px;
  width: 11px;
  border-left: 0px;
  top: 3px;
}

<!DOCTYPE html>
<div class="player-chromecast">
  <div class="broadcast">
    <div class="reception first-bar"></div>
    <div class="reception second-bar"></div>
  </div>
</div>

请立即在Firefox或任何其他浏览器中检查其是否正常运行，我的意思是悬停时没有边框.....让我知道您是否仍然遇到相同的错误

Firefox转换：在悬停问题上扩展

1 个答案: