CSS стили не отображаются на некоторых версиях iphone

Question

Столкнулся с проблемой, с которой никогда не сталкивался. Почему-то, на некоторых версиях iphone, не отображаются стили, что мне нужны. Проблема у меня состоит в кнопке, что вызывает бургер-меню и футере. Итак, приведу пример корректного отображения блока на мобильных устройствах:

А так эта кнопка выглядит например на версии айфона 6s:

Как можем заметить, кнопка существует, на нее можно нажать, у нее есть заданная мною тень, но в ней нет заливки и нет трёх полос.

HTML код кнопки:

<div class="burger-botton-1">
    <span></span>
    <span></span>
    <span></span>
</div>

Стили кнопки:

.burger-botton-1{
    display: block;
    height: 55px;
    width:100%;
    background-color:var(--pink);
    display: flex;
    align-items: center;
    justify-content:center;
    flex-direction: column;
    padding-top: 5px;
    z-index: 22;
    position: fixed;
    bottom: 0;
    box-shadow: 1px -1px 20px 1px #0000005e;
    span{
        display: block;
        margin-bottom: 7px;
        height: 3px;
        width:40px;
        background-color: var(--textGrey);
        border-radius:50px;
        z-index: 13;
        margin-left: auto;
        margin-right: auto;
        font-size:0;
        transition: all 0.5s;
    }
    span:nth-of-type(1){
        position: relative;
        right: 5px;
        width: 30px;
        padding-left: 10px;
    }
    span:nth-of-type(2){
        position: relative;
    }
    span:nth-of-type(3){
        position: relative;
        left: 5px;
        width: 30px;
    }
    
}
.burger-botton-1.active{
    span:nth-of-type(1){
        position: relative;
        left: 5px;
        width: 30px;
        height: 3px;
    }
    span:nth-of-type(3){
        position: relative;
        left: -5px;
        width: 30px;
        height: 3px;
    }
}

Очень надеюсь на помощь css-гуру)))

Answer 1

.burger-botton-1 {
  height: 55px;
  width: 100%;
  background-color: var(--pink);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding-top: 5px;
  z-index: 22;
  position: fixed;
  bottom: 0;
  -webkit-box-shadow: 1px -1px 20px 1px #000000;
          box-shadow: 1px -1px 20px 1px #000000;
}

.burger-botton-1 span {
  display: block;
  margin-bottom: 7px;
  height: 3px;
  width: 40px;
  background-color: var(--textGrey);
  border-radius: 50px;
  z-index: 13;
  margin-left: auto;
  margin-right: auto;
  font-size: 0;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.burger-botton-1 span:nth-of-type(1) {
  position: relative;
  right: 5px;
  width: 30px;
  padding-left: 10px;
}

.burger-botton-1 span:nth-of-type(2) {
  position: relative;
}

.burger-botton-1 span:nth-of-type(3) {
  position: relative;
  left: 5px;
  width: 30px;
}

.burger-botton-1.active span:nth-of-type(1) {
  position: relative;
  left: 5px;
  width: 30px;
  height: 3px;
}

.burger-botton-1.active span:nth-of-type(3) {
  position: relative;
  left: -5px;
  width: 30px;
  height: 3px;
}

Answer 2

Итак, проблема была в том, что я использовал цвет в формате rgba, но указывал в нем 3 параметра. Типа такого: rgba(0,0,0). Как я понял, айфоны некоторых версий обязательно хотят видеть и 4й параметр (прозрачность). Добавил 4й параметр во все цвета rgba и все заработало ( поменял, например, rgba(0,0,0) на rgba(0,0,0,1).

БЛОГ НА HUSL

CSS стили не отображаются на некоторых версиях iphone

Ответы (2 шт):