背景颜色：rgba() - Safari 透明度 CSS 错误

Question

我使用rgba（0,0,0,0.5）作为background-color属性，在除了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>

- Július Ľuptovec

---

你的代码在我的Mac上使用Safari 12.0.2运行良好。你朋友电脑上出了什么问题？半透明的灰色背景只是显示为白色，还是有其他问题？ - mfluehr

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 中已经修复了。

- Július Ľuptovec

---

谢谢，这个解决了我的问题。多么奇怪的 bug！ - Lewis Donovan

Answer 2

在撰写本答案时，iOS 12的使用率仍然为5％-这仍然足以分享我的CSS-only解决方案，以解决此未记录的RGBA不透明度错误。我希望我的解决方案能够帮助未来的访客支持旧版本的iOS，而不会太费心。这篇S/O文章似乎是关于这个错误在互联网上唯一的痕迹。

我的情况：我有一个工业网站设计，在iOS 12及以下版本中，所有我的RGBA不透明度值都会正好渲染两倍。设计相当简单，我使用了一些父元素的-webkit-mask-image（不稳定）CSS来淡化角落。我使用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选择器。

我将我的半透明背景放在这个at-rule中：

@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) 目标是苹果的 Webkit，因此我们修改的 RGBA 值仅适用于苹果产品，然后 line-break: anywhere 仅在 iOS 13 及更高版本中可用，因此我们将其否定以针对 iOS 12.x 及更低版本。来源：Safari 13.1 发布说明

- Aaron Gillion

Answer 3

我在iOS设备上尝试了这个方法，真是神奇。

- iLove AfricaMusic