css transform 属性上的 CSS Transition 导致父项仅在 Google Chrome 中闪烁

Question

我遇到了一个非常具体的渲染问题。在转换属性上执行 css 转换时，直接父级在转换过程中变暗，即使不透明度没有改变。这只发生在 Chrome 中，不会发生在 Safari 或 Firefox 中，而且我在 Mac 上。

有没有人看到这个问题或有什么想法？

$('#toggle').click(function(e){
	$('#bar').toggleClass('on');
});

body {
  background: #222;
}
#bar {
  background: #999;
  opacity: .5;
  height: 4px;
  border-radius: 2px;
  width: 300px;
  margin: 30px 5px;
}
#inner {
  background: #ee2f51;
  height: 4px;
  border-radius: 2px;
  width: 1px;
  transition: all 1s;
  transform-origin: left;
  transform: scaleX(100);
}
.on #inner{
  transform: scaleX(300);
}
/* 
//option pulse animation
#bar.on {
  animation: pulse 1s ease-in-out;
}
@keyframes pulse {
  0% {
    opacity: .5;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: .5;
  }
} */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="wrapper">
  <div id="bar">
    <div id="inner"></div>
  </div>
</div>


<button id="toggle">
toggle bar
</button>

Answer 1

如果您从#bar 中删除opacity: 0.5，问题就会消失，但您的颜色会有所不同。此版本适用于所有浏览器，但您必须根据自己的喜好调整 rgba。

$('#toggle').click(function(e){
	$('#bar').toggleClass('on');
});

body {
  background: #222;
}

#bar {
  background: rgba(153, 153, 153,0.65);
  height: 4px;
  border-radius: 2px;
  width: 300px;
  margin: 30px 5px;
}

#inner {
  background: rgba(193, 16, 47, 0.65);
  height: 4px;
  border-radius: 2px;
  width: 1px;
  transition: all 1s;
  transform-origin: left;
  transform: scaleX(100);
}

.on #inner {
  transform: scaleX(300);
}


/* 
//option pulse animation
#bar.on {
  animation: pulse 1s ease-in-out;
}
@keyframes pulse {
  0% {
    opacity: .5;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: .5;
  }
  } */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div id="bar">
    <div id="inner"></div>
  </div>
</div>


<button id="toggle">
toggle bar
</button>