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

Question

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

我不能使用 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% 不透明度。我不知道是什么原因造成的。

编辑：

当您使用“0.5”时，Safari 版本 12.0.2 有时会在使用 rgba 渲染不透明度时出现问题，但当您使用“.5”（不为零）时就没问题了。我不知道是什么原因造成的，也许它已经在新版本的 safari 中修复了。

Answer 2

在撰写此答案时，iOS 12 的使用率仍为 5% - 这仍然足以分享我对这个未记录的 RGBA 不透明度错误的仅 CSS 解决方案。我希望我的解决方案可以帮助未来的访问者支持 iOS 的旧版本，而不会太费力。 S/O post 似乎是互联网上关于此错误的唯一线索。

我的案例： 我有一个工业网站设计，其中我所有的 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。我还确认 iPhone 4S 运行 iOS 9 也呈现两次不透明。

我尝试按上述方法处理 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

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

Background-color:rgba() - Safari transparency css bug

html

css

safari

background-color

rgba