背景色:rgba()-Safari透明css错误

Question

我使用rgba(0,0,0,0.5)作为背景色属性，除了我朋友的macbook上的safari 12.0.2版本外，它在所有浏览器中都能正常工作。我也在使用https://www.lambdatest.com/为了测试浏览器兼容性，它在他们的safari浏览器上运行得很好，除了在我朋友的macbook上，其他地方都可以，有什么问题吗？

我不能使用HEX代码和不透明度规则，因为这也会影响这个div顶部的按钮，而且只有rgba在我朋友的笔记本电脑上不工作，rgb或HEX可以，但我需要使用rgba，因为不透明度。

兼容性表显示rgba在safari 2.0+上受支持，所以我认为它没有理由不在safari 12.0.2 上工作

有什么想法可能导致这种情况吗？

.initialPanel {
overflow: hidden;
width: 900px;
height: 130px;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center
}
.initialPanelWrap {
position: absolute;
width: 100%;
bottom: 35%;
display: flex;
justify-content: center
}
.HpButtonGreen {
height: 60px;
width: 360px;
background-color: #1e983e!important;
color: white;
border: none;
cursor: pointer;
}
.HpButtonGreen:hover {
background-color: #0F792B!important;
-webkit-transition: background-color 300ms linear;
-ms-transition: background-color 300ms linear;
transition: background-color 300ms linear;
}

<div class="initialPanelWrap">
<div class="initialPanel">
<div class="riadok">
<div class="butcol margin-right-30"><button class="HpButtonGreen" type="button"></button></div>
<div class="butcol"><button class="HpButtonGreen" type="button"></button></div>
</div>
</div>
</div>

Answer 1

好吧，现在这真的很奇怪。当我使用rgba(0, 0, 0, 0.5)时，背景根本不可见，但当我使用rgba(0,0,0,0.51)或0.49时，它正在工作，rgba上完全没有显示50%的不透明度。我不知道是什么原因造成的。

编辑：

Safari 12.0.2版本在使用0.5时有时会出现rgba渲染不透明度的问题，但当使用.5(没有零)时也可以。我不知道是什么原因造成的，也许在Safari的新版本中已经修复了。

Answer 2

在撰写此答案时，iOS 12的使用率仍为5%，这仍然相当可观，足以分享我的CSS专用解决方案来解决这个未记录的RGBA不透明错误。我希望我的解决方案能帮助未来的访问者在不太挠头的情况下支持旧版本的iOS。这篇S/O帖子似乎是互联网上关于这个bug的唯一线索。

我的案例：我有一个工业网站设计，在iOS 12及以下版本中，我的所有RGBA不透明度值都是它的两倍。设计相当简单，我使用的唯一非标准(不稳定)CSS是-webkit-mask-image，它在一些父元素上用于渐变角。我使用rgba(200,200,200,0.5)语法作为平面背景，也使用线性渐变。我的iOS 12测试设备是iPhone 8 Plus和iPhone 6。我的iOS 13测试设备是iPhone XS Max和iPhone 7。我还证实，运行iOS9的iPhone 4S的不透明性也提高了一倍。

我试着如上所述操纵阿尔法值，但这并没有解决我在任何测试设备上的问题。

我能让所有iPhone的不透明性匹配的唯一方法是复制CSS规则集，将alpha值减半，并针对iOS 12及以下版本。在5%的移动使用率下，我不想只为这个奇怪的错误编写JavaScript用户代理检测，所以我做了一些挖掘，为iOS 12及以下版本创建了一个CSS选择器。

我把我的一半作为不透明的背景放在这个规则中：

@supports (-webkit-touch-callout: none) and (not (line-break: anywhere)) {
#bugfix { background: rgba(200,200,200,0.25); }  /* Divide last value by 2 */
}

解释：@supports (-webkit-touch-callout: none)以Apple Webkit为目标，因此我们更改的RGBA值仅适用于苹果产品，而line-break: anywhere仅适用于iOS 13及更高版本，因此我们将其否定为iOS 12.x及更低版本。来源：Safari13.1发行说明

Answer 3

我试过这个，它在iOS设备上给我带来了魔力

@支持(-webkit touch callout：无){背景：线性渐变(到底部，rgba(0，0，0)0%，rgba！重要的}