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

Question

I'm using rgba(0,0,0,0.5) as background-color property, it works fine in every browser except safari version 12.0.2 on my Friend's macbook I'm also using https://www.lambdatest.com/ to test browser compatibility, it works just fine on their safari browsers, simply everywhere except on my friends macbook, any ides what might be the problem ?

I can not use HEX code and then opacity rule, because this also affects buttons on top of this div, also only rgba is not working on my friends laptop, rgb or hex does, but i need to use rgba because of opacity.

Compatibility tables says that rgba is supported on safari 2.0+ so I see no reason why it should not not working on safari 12.0.2

Any ideas what might cause this ?

 .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

Ok, now this is really weird but when I used rgba(0, 0, 0, 0.5) the background was not visible at all but when I used rgba(0,0,0,0.51) or 0.49 it was working, just the exact 50% opacity on rgba was not showing at all. I have no idea what was causing this.

EDIT:

Safari version 12.0.2 sometimes have problem rendering opacity with rgba when you use "0.5" but when you use ".5" (without zero) it's okay. I have no idea what is causing this and maybe it's already fixed in newer versions of safari.

Answer 2

At the time of writing this answer, iOS 12 usage is still at 5% - which is still considerable enough to share my CSS-only solution to this undocumented RGBA opacity bug. I hope my solution helps future visitors support older versions of iOS without scratching their heads too much. This S/O post seems to be the only trace on the Internet regarding this bug.

My case: I have an industrial website design where all my RGBA opacity values are rendered exactly twice as opaque on iOS 12 and below. The design is rather simple, and the only non-standards (unstable) CSS I use is -webkit-mask-image on a few parent elements for fading corners. I use rgba(200,200,200,0.5) syntax as flat backgrounds and also in linear gradients. My iOS 12 test devices were iPhone 8 Plus and iPhone 6. My iOS 13 test devices were iPhone XS Max and iPhone 7. I also confirmed that an iPhone 4S running iOS 9 also rendered twice as opaque.

I tried manipulating the alpha values as described above, but that didn't solve my problem on any of my test devices.

The only way I could get the opacities to match across all the iPhones was to duplicate the CSS rule set, cut the alpha values in half, and target iOS 12 and below. At 5% mobile usage, I did not want to have to write JavaScript user agent detection just for this weird bug, so I did some digging to create a CSS selector for iOS 12 and below.

I placed my half-as-opaque backgrounds within this 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 */

}

Explanation: @supports (-webkit-touch-callout: none) targets Apple Webkit so our altered RGBA values only apply to Apple products, then line-break: anywhere is only available on iOS 13 and higher, so we negate that to target iOS 12.x and lower. Source: Safari 13.1 Release Notes