Search code examples
htmlcsssafaribackground-colorrgba

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


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>


Solution

  • OK, now this is really weird. 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 has a problem rendering opacity with rgba when you use 0.5, but when you use .5 (without a zero) it's okay. I have no idea what is causing this, and maybe it's already fixed in newer versions of Safari.