Question

在 one of my other questions中，修复渲染问题的解决方案是使用值rgba(255, 255, 255, 255)而不是transparent.我们使用rgba(0, 0, 0, 0)进行了测试，这仍然纠正了问题，这意味着导致错误的是transparent的定义。但是，查看transparent的{{3}}（和W3C CSS3 Specification）表明rgba(0, 0, 0, 0)和transparent应该相等：

透明

完全透明。此关键字可以被视为a   透明黑色的简写，rgba（0,0,0,0），这是它的计算   值。

那是什么给出的？为什么两个看似相同的值会产生不同的结果呢？我已经查看了RGBA的MDN reference，并寻找了类似的问题（无济于事）。提及从transparent到rgba(0,0,0,0)的转换的每个问题/答案都应该包含＆＃39;应该＆＃39;或者＆＃39;根据＆＃39; in。（例如the formatting）。什么是实际差异，为什么它会如此改变输出？

N.B：这种情况发生在大多数（如果不是全部）Internet Explorer版本中。我们也知道它出现在某些版本的Firefox中。但是，Chrome和Safari不会显示此行为，导致我们认为-webkit中存在某种补丁。

为了能够将此作为错误提交，我们需要使用最少量的代码重现问题。所以，从我的其他问题转移，这里是使用transparent与rgba(0,0,0,0)的比较，以及当我们使用两者时会发生什么。

透明

＆＃13;

@keyframes spin{
	0% {transform:rotateZ(0deg);}
	50% {transform:rotateZ(360deg);border-radius:60%;}
	100%{transform:rotateZ(720deg);}
}
.spinme{
	display:inline-block;
	position:relative;
	left:0;
	top:0;
	margin:0.2rem;
	width:0.8rem;
	height:0.8rem;
	border:0.2rem solid black;
	border-radius:0%;
	outline: 1px solid transparent;
	transform:rotateZ(0deg);
	animation: spin infinite 4s;
}

＆＃13;

<div class="spinme"></div>

＆＃13;

RGBA（0,0,0,0）

＆＃13;

@keyframes spin{
	0% {transform:rotateZ(0deg);}
	50% {transform:rotateZ(360deg);border-radius:60%;}
	100%{transform:rotateZ(720deg);}
}
.spinme{
	display:inline-block;
	position:relative;
	left:0;
	top:0;
	margin:0.2rem;
	width:0.8rem;
	height:0.8rem;
	border:0.2rem solid black;
	border-radius:0%;
	outline: 1px solid rgba(0,0,0,0);
	transform:rotateZ(0deg);
	animation: spin infinite 4s;
}

＆＃13;

<div class="spinme"></div>

＆＃13;

两个

正如@andyb所指出的那样，在单独的元素上使用它们时会有奇怪的行为。你会期望只有一个人会摇晃，但他们都会这样做。如上所示：

＆＃13;

@keyframes spin{
  0% {transform:rotateZ(0deg);}
  50% {transform:rotateZ(360deg);border-radius:60%;}
  100%{transform:rotateZ(720deg);}
}
.spinme{
  display:inline-block;
  position:relative;
  left:0;
  top:0;
  margin:0.2rem;
  width:0.8rem;
  height:0.8rem;
  border:0.2rem solid black;
  border-radius:0%;
  outline: 1px solid rgba(0,0,0,0);
  transform:rotateZ(0deg);
  animation: spin infinite 4s;
}
.spinme:nth-of-type(2){
  outline: 1px solid transparent;
}

＆＃13;

<div class="spinme"></div>
<div class="spinme"></div>

＆＃13;

对于那些无法在Internet Explorer中对此进行测试的人，这里是问题的动画.gif：

here

左边是transparent，中间是rgba，右边是。{/ p>

正如@Abhitalks所指出的那样，我误读了参考文献，但是我会在问题中留下下面的内容，以表明我们已经考虑过这种可能性，或者万一有些事情被遗漏/忽略了。

~~感谢@ juan-c-v的回答，我决定尝试创建一个测试，以便在每个浏览器中找到transparent的计算值，并提出以下建议：< /秒>~~

＆＃13;
＆＃13;
$('p').text($('p').css("background-color"));
＆＃13;
p{background-color:transparent;}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p></p>
＆＃13;
＆＃13;
＆＃13;

如果您在Chrome / Safari中查看此内容，那么您很可能会看到（如果您没有评论）rgba(0,0,0,0)。但是在IE中，您可能仍会看到transparent。我正在阅读参考文献并发现：

不支持透明关键字。

这解释了浏览器显示不同结果的原因。但是，它并没有解释他们的transparent版本实际定义为什么。我查看了旧的CSS1和CSS2 w3c规范，但无法找到旧的定义。 transparent是什么意思？

Answer 1

我一直在尝试使用Chrome中值transparent的代码，该代码安装在运行Windows 7操作系统的笔记本电脑上。

我自己也没有任何晃动。所以我希望这个问题特定于某些浏览器和操作系统，具体取决于特定浏览器和操作系统决定如何渲染元素。

此问题可能与您的浏览器是否使用硬件加速有关。现在，有一种方法可以强制您的浏览器使用硬件加速：让您的浏览器认为3D转换正在应用于元素。

您可以通过向元素添加以下属性来实现：

.fake3Dtransformation {
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
  /* Other transform properties here */
}

虽然我不完全确定在使用transparent时是否会解决这个摇摆不定的问题（因为我无法重现这个问题），但理论上应用这个“黑客”应该会让你最顺利渲染。查看例如。 this article了解更多信息。

因此，对于您的演示代码，您最终会得到：

@keyframes spin{
    0% {transform:rotateZ(0deg);}
    50% {transform:rotateZ(360deg);border-radius:60%;}
    100%{transform:rotateZ(720deg);}
}
#spinme{
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    display:inline-block;
    position:relative;
    left:0;
    top:0;
    margin:0.2rem;
    width:0.8rem;
    height:0.8rem;
    border:0.2rem solid black;
    border-radius:0%;
    outline: 1px solid rgba(0,0,0,0);
    animation: spin infinite 4s;
}

#spinme:nth-of-type(2){
    outline: 1px solid transparent;
}

<div id="spinme"></div>
<div id="spinme"></div>

THE FIDDLE：

<强> https://jsfiddle.net/z2r7ypy7/4/

Answer 2

在我看来，两次使用相同的id并不好，无论你做什么，它都是一个标识符。我也觉得它们都显示动画并不奇怪，因为它们都具有与css中的animation匹配的相同ID。

#spinme{
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    display:inline-block;
    position:relative;
    left:0;
    top:0;
    margin:0.2rem;
    width:0.8rem;
    height:0.8rem;
    border:0.2rem solid black;
    border-radius:0%;
    outline: 1px solid rgba(0,0,0,0);
    transform:rotateZ(0deg);

}

#spinme:nth-of-type(1){
    animation: spin infinite 4s;
}

如果你这样做，只有一个摆动，这对我来说非常有意义。也许它没有回答你关于transparent问题的问题，但我不确定这是否真的是问题。

修改无论我尝试使用哪种颜色，transparent或rgba(0,0,0,0)都可以在Safari上进行动画制作。

rgba（0,0,0,0）和透明之间的区别是什么？

透明

RGBA（0,0,0,0）

两个

2 个答案: