CSS Google Chromeでのみ親をちらつくようにするCSS変換プロパティ上での遷移

Question

私はかなりのレンダリングの問題を抱えています。 Transformプロパティでcssトランジションを実行すると、トランジション中に、たとえ不透明度が変更されていなくても、ダイレクトペアレントがディミングされます。これは、SafariやFirefoxではなくChromeでのみ発生し、私はMac上にいる。

誰でもこの問題を見たことがありますか？

$('#toggle').click(function(e){ 
 
\t $('#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){ 
 
\t $('#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>