CODEWITHSUNDEEP
css
Chris Arasin
Chris Arasin

Reputation: 516

CSS Transition on a css transform property causing the parent to flicker only in Google Chrome

I have a pretty specific rendering issue I came across. When doing a css transition on a transform property, the direct parent is dimming during the transition, even though the opacity is not being changed. This only happens in Chrome, not Safari or Firefox, and I'm on a mac.

Has anyone seen this issue or have any thoughts?

$('#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>

Upvotes: 0

Views: 100

Answers (1)

UltrasoundJelly
UltrasoundJelly

Reputation: 1900

If you remove opacity: 0.5 from #bar the problem goes away, but your colors are different. This version works fine on all browsers, but you'll have to tweak the rgba to your liking.

$('#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>

Upvotes: 1

Related Questions