css轉換屬性的CSS過渡導致父級只在Google Chrome中閃爍

我遇到了一個非常特殊的呈現問題。在transform屬性上進行css轉換時，即使不更改不透明度，直接父級也會在轉換期間變暗。這隻發生在Chrome瀏覽器，而不是Safari或Firefox，而我正在使用Mac。css轉換屬性的CSS過渡導致父級只在Google Chrome中閃爍

有沒有人看過這個問題或有任何想法？

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

來源

2016-11-04 Chris Arasin

哪個版本的Chrome瀏覽器？窗戶上的鉻合金54的一切看起來都不錯。 – Dekel

我在MacOS Chrome 54.0.2840.71（64位）上看到調光。有趣的是，當我將片段複製到答案中，然後嘗試編輯並運行它時，奇怪的調光行爲就消失了。 – UltrasoundJelly

是的，我在輸入代碼片段時也看到了這一點。真是離奇。 –

如果從#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>

來源

2016-11-04 00:55:18 UltrasoundJelly

有趣......我也在動畫不透明度（你可以在註釋掉的動畫中看到），這就是爲什麼那個不透明規則在那裏。 –

嘗試從1開始對不透明度進行動畫處理，看看你是否得到了奇怪的活動。 – UltrasoundJelly

我最終通過對孩子的元素而不是父母的不透明度進行動畫處理，因爲我想變暗以恢復暗淡。 –

css轉換屬性的CSS過渡導致父級只在Google Chrome中閃爍

回答

相關問題