Safari不支持元素背景色吗？

Question

元素的背景色未覆盖位于其上方的元素。如果Safari不支持，或者我的代码有问题，我会努力解决。

下面的代码在Chrome，Firefox等浏览器上工作正常，但在Safari上却不能，H1元素的背景色应隐藏以下Container div的边框。

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)

CODEPEN示例 https://codepen.io/grantsmith/pen/YMVMgO

我希望看到与下图类似的内容：

Answer 1

我建议您以rgb（如果要透明的话为rgba）格式使用背景色，而不要使用名称或代码。例如：

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

或者您可以尝试一下，看看是否有效

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

Answer 2

也许是因为z-index属性仅适用于定位的元素，您是否尝试为position: relative添加.introH1吗？

Answer 3

只需添加到.introH1

<httpRuntime executionTimeout="300" />

您的h1元素由于视角和rotationX属性而位于容器下方，容器在旋转时与h1重叠