html - 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)

代码示例 https://codepen.io/grantsmith/pen/YMVMgO

我希望看到类似于下图的内容:

Answer 1

只需添加到.introH1

transform: translate3D(0,0,0.5px)

你的h1元素因为perspective和rotateX属性在容器下面，旋转时容器重叠h1