Цвет фона элемента не поддерживается в Safari?

Question

Цвет фона элемента не покрывает элемент, над которым он расположен.Я изо всех сил пытаюсь понять, если это просто не поддерживается Safari или проблема с моим кодом.

Приведенный ниже код отлично работает на Chrome, Firefox и т. Д., Но не на Safari, цвет фона элемента H1 должен скрывать границу раздела ниже контейнера.

HTML

<section class="section">
  <h1 class="introH1"><strong>What's the difference? Craft vs plant</strong></h1>
  <div class="container">
    <div class="column">
      <p>I am trying to achieve the following in the most responsive, backward compatible way as possible. I appreciate that I may need to make a big compromise somewhere.</p>
    </div>
  </div>
</section>

SASS

.section
    display: flex
    flex-direction: column
    justify-content: center
    align-items: center
    padding: 4rem 1.5rem

    .introH1
        font-family: Monospace
        font-weight: bold
        text-transform: uppercase
        font-size: 1.875rem
        display: inline-block
        padding: 0 15px
        background-color: white
        margin-bottom: -1rem
        z-index: 2

    .container
        font-family: Monospace
        border: 3px solid #000
        text-align: center
        padding: 30px
        transform: perspective(10px) rotateX(-0.3deg)
        border-radius: 8px
        max-width: 800px
        box-sizing: border-box

        .column
            transform: perspective(10px) rotateX(0.3deg)

ПРИМЕР КОДЕЖА https://codepen.io/grantsmith/pen/YMVMgO

Я ожидаю увидеть нечто похожее на изображение ниже:

Answer 1

возможно, это из-за того, что свойство z-index работает только для позиционированных элементов. Вы пытались добавить position: relative для .introH1?

Answer 2

Просто добавьте в .introH1

transform: translate3D(0,0,0.5px)

Ваш элемент h1 находится под контейнером из-за свойства перспективы и rotateX, контейнер пересекается с h1 при повороте

Answer 3

Я бы предложил вам использовать цвет фона в формате rgb (rgba, если вы хотите прозрачность) вместо использования имени или кода. Например:

background color : rgb(255, 255, 255);

или вы можете попробовать это и посмотреть, работает ли

# @media screen and (-webkit-min-device-pixel-ratio:0)
{
#safari { background-color:#FFFF }
}