Ошибка рендеринга CSS Safari

Question

Так что я столкнулся со странной ошибкой / ошибкой, когда сафари лишь частично отображал некоторые вещи.

.hexagon {
    position: relative;
    display: inline-block;
    width: 120px;
    height: 120px;
    /* border style */
    /* theme */
  }
  .hexagon .hexagon-shape {
    z-index: 1;
    position: absolute;
    top: -90px;
    left: -60px;
    overflow: hidden;
    display: inline-block;
    margin: 48px 0;
    width: 240px;
    height: 208px;
    -webkit-transform: rotate(-30deg) skewX(30deg) scale(1.3);
    -moz-transform: rotate(-30deg) skewX(30deg) scale(1.3);
    -ms-transform: rotate(-30deg) skewX(30deg) scale(1.3);
    -o-transform: rotate(-30deg) skewX(30deg) scale(1.3);
    transform: rotate(-30deg) skewX(30deg) scale(1.3);
    border-radius: 18px;
  }
  /* hover effect */
  /* .hexagon .hexagon-shape:hover {
    transform: rotate(-30deg) skewX(30deg) scale(1.4);
  } */

  .hexagon .hexagon-shape *,
  .hexagon .hexagon-shape *:before {
    display: block;
    overflow: hidden;
    width: inherit;
    height: inherit;
    border-radius: inherit;
  }
  .hexagon .hexagon-shape .hexagon-shape-inner {
    -webkit-transform: skewX(-30deg) rotate(60deg) skewX(30deg);
    -moz-transform: skewX(-30deg) rotate(60deg) skewX(30deg);
    -ms-transform: skewX(-30deg) rotate(60deg) skewX(30deg);
    -o-transform: skewX(-30deg) rotate(60deg) skewX(30deg);
    transform: skewX(-30deg) rotate(60deg) skewX(30deg);
    opacity: 1;
  }
  .hexagon .hexagon-shape:first-child .hexagon-shape-inner:before,
  .hexagon .hexagon-shape .hexagon-shape-inner-2 {
    -webkit-transform: skewX(-30deg) rotate(60deg) skewX(30deg);
    -moz-transform: skewX(-30deg) rotate(60deg) skewX(30deg);
    -ms-transform: skewX(-30deg) rotate(60deg) skewX(30deg);
    -o-transform: skewX(-30deg) rotate(60deg) skewX(30deg);
    transform: skewX(-30deg) rotate(60deg) skewX(30deg);
    background: #289de9;
    content: '';
  }
    #yellowish .hexagon-shape:first-child .hexagon-shape-inner:before,
    #yellowish .hexagon-shape .hexagon-shape-inner-2 {
    background: #E4B726 !important;
    }
    #mint .hexagon-shape:first-child .hexagon-shape-inner:before,
    #mint .hexagon-shape .hexagon-shape-inner-2 {
    background: #14D99E !important;
    }
    #blue .hexagon-shape:first-child .hexagon-shape-inner:before,
    #blue .hexagon-shape .hexagon-shape-inner-2 {
    background: #30BACF !important;
    }
    #purplish .hexagon-shape:first-child .hexagon-shape-inner:before,
    #purplish .hexagon-shape .hexagon-shape-inner-2 {
    background: #54264D !important;
    }
    #notAvailable .hexagon-shape:first-child .hexagon-shape-inner:before,
    #notAvailable .hexagon-shape .hexagon-shape-inner-2 {
    background: rgb(202, 202, 202) !important;
    }
  .hexagon .hexagon-content {
    position: absolute;
    top: 20px;
    left: 0;
    width: 100%;
    text-align: center;
    line-height: 1.5;
    z-index: 2;
  }
  .hexagon .hexagon-content .content-title {
    font-size: 11px;
    top: -24px;
    position: relative;
  }
  .hexagon .hexagon-content .content-img {
    width: 6rem;
    position: relative;
    top: -50px;
  }
  .hexagon .hexagon-content .content-sub {
    color: #9f9fa0;
  }
  .hexagon.hexagon-with-border .hexagon-shape.content-panel {
    -webkit-transform: rotate(-30deg) skewX(30deg) scale(0.46);
    -moz-transform: rotate(-30deg) skewX(30deg) scale(0.46);
    -ms-transform: rotate(-30deg) skewX(30deg) scale(0.46);
    -o-transform: rotate(-30deg) skewX(30deg) scale(0.46);
    transform: rotate(-30deg) skewX(30deg) scale(0.46);
  }
  .hexagon.hexagon-with-border .hexagon-shape.content-panel:first-child .hexagon-shape-inner:before,
  .hexagon.hexagon-with-border .hexagon-shape.content-panel .hexagon-shape-inner-2 {
    background: #fff;
  }
  .hexagon.hexagon-button {
    cursor: pointer;
  }
  .hexagon.hexagon-button .content-title {
    font-size: 56px;
    color: #fff;
    padding-top: 0;
  }
  .hexagon.info .hexagon-shape:first-child .hexagon-shape-inner:before,
  .hexagon.info .hexagon-shape-inner-2 {
    background: #54c6f3;
  }
  .hexagon.info .hexagon-shape.content-panel:first-child .hexagon-shape-inner:before,
  .hexagon.info .hexagon-shape.content-panel .hexagon-shape-inner-2 {
    background: #eef9fe;
  }
  .hexagon.info .content-title {
    color: #54c6f3;
  }
  .hexagon.warning .hexagon-shape:first-child .hexagon-shape-inner:before,
  .hexagon.warning .hexagon-shape-inner-2 {
    background: #ff8100;
  }
  .hexagon.warning .content-title {
    color: #ff8100;
  }
  .hexagon.destroy .hexagon-shape:first-child .hexagon-shape-inner:before,
  .hexagon.destroy .hexagon-shape-inner-2 {
    background: #b5c0c9;
  }
  .hexagon.destroy .content-title {
    color: #b5c0c9;
  }

#blue {
margin: 20%;
}

          
  <div id="blue" class="hexagon hexagon-button">
            <div class="hexagon-shape content-panel">
                <div class="hexagon-shape-inner">
                    <div class="hexagon-shape-inner-2"></div>
                </div>
            </div>
            <div class="hexagon-content">
                <div class="content-title"></div>
                <div class="content-sub"></div>
            </div>
   </div>

ошибка

на изображениях вы можете увидеть глюк рендера при прокрутке, иногда он исчезает, иногда нет но наверняка он есть -> Кроме того, его Safari в целом, потому что та же проблема возникает на iOS и iPadO.

Возможно, это проблема с webkit?