CSS转换为css转换属性，导致父级仅在Google Chrome中闪烁

Question

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

有没有人看过这个问题或有任何想法？

＆＃13;

＆＃13;

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

＆＃13;

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;
  }
} */

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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;
  }
  } */

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;