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中闪烁

回答

相关问题