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

Question

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

我不能使用 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>

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 帖子似乎是 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 发行说明