Я использую rgba (0,0,0,0.5) в качестве свойства background-color, он отлично работает во всех браузерах, кроме сафари версии 12.0.2 на macbook моего друга. Я также использую 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>