相关疑难解决方法(0)

在我的其他一个问题中,修复渲染问题的解决方案是使用值rgba(255, 255, 255, 255)而不是transparent.我们测试使用rgba(0, 0, 0, 0),这仍然纠正了问题,这意味着它的定义transparent会导致错误.但是,查看W3C CSS3规范(和MDN参考)可以transparent发现rgba(0, 0, 0, 0)并且 transparent应该相同:

透明

完全透明.此关键字可以视为透明黑色的简写,rgba(0,0,0,0),这是其计算值.

什么给出了什么？为什么两个看似相同的值会产生不同的结果呢？我研究了RGBA 的格式,并寻找类似的问题(无济于事).每一个问题/答案,从提到的转换transparent,以rgba(0,0,0,0)总是在词"应该"或"根据"了.(例如这里).什么是实际差异,为什么它会如此改变输出？

注意:这种情况发生在大多数(如果不是全部)Internet Explorer版本中.我们也知道它出现在某些版本的Firefox中.但是,Chrome和Safari不会显示此行为,导致我们相信存在某种补丁-webkit.

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

透明

@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: …

有一个块，其中靠近结尾的文本逐渐消失。这是通过使用完成::after，这是考虑linear-gradient从透明颜色的背景颜色。最近注意到，在当前版本的浏览器中，一切都很好，除了 safari（在第 11 版中，太糟糕了）。Autoprefix 不是解决方案（他在这里，不需要）。

我的代码：

* {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  min-height: 100vh;
}

p {
  margin: auto;
  width: 40vw;
  height: 40vh;
  max-width: 300px;
  max-height: 300px;
  overflow: hidden;
  position: relative;
}

p::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50%;
  background-image: linear-gradient(transparent 0, white 100%);
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel urna efficitur, tempor felis eu, lacinia sem. Nulla lacinia …