Background-color:rgba() - Safari 透明度 css 错误答案

【问题标题】：Background-color:rgba() - Safari transparency css bugBackground-color:rgba() - Safari 透明度 css 错误
【发布时间】：2019-01-02 12:04:29
【问题描述】：

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

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

兼容性表表明 safari 2.0+ 支持 rgba，所以我看不出它为什么不能在 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>

【问题讨论】：

您的代码在我的 Mac 上运行良好，使用 Safari 12.0.2。你朋友的电脑有什么问题？（半透明）灰色背景是否只是显示为白色，或者究竟是什么？

标签： html css safari background-color rgba

【解决方案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 中修复了。

【讨论】：

谢谢，这为我解决了问题。多么奇怪的错误！

【解决方案2】：

在撰写此答案时，iOS 12 的使用率仍为 5% - 这仍然足以分享我对这个未记录的 RGBA 不透明度错误的纯 CSS 解决方案。我希望我的解决方案可以帮助未来的访问者支持旧版本的 iOS，而不会过多地摸不着头脑。这篇 S/O 帖子似乎是 Internet 上有关此错误的唯一踪迹。

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

我尝试按照上述方法操作 alpha 值，但这并没有解决我在任何测试设备上的问题。

我可以让所有 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 值仅适用于 Apple 产品，然后 line-break: anywhere 仅适用于 iOS 13 及更高版本，因此我们否定它以针对 iOS 12 .x 及更低版本。来源：Safari 13.1 Release Notes

【讨论】：