Safari 上的 CSS 转换问题答案

【问题标题】：CSS transform issues on SafariSafari 上的 CSS 转换问题
【发布时间】：2021-12-08 12:44:30
【问题描述】：

我目前正在使用 VueJS、SCSS 和纯 CSS 制作我的作品集。我制作的一些元素和动画遇到了一些问题。

在 Firefox 和 Chrome 上没有问题，但在 Safari 上我使用变换旋转属性时完全出错。

让我们看一个使用以下代码制作的 3D 效果示例：

.card-container {
      width: 500px;
      aspect-ratio: 5/3;
      margin-left: auto;
      margin-right: auto;
      border-radius: 20px;
      box-shadow: 0 10px 40px 2px rgba(0, 0, 0, 0.4);
      background: #000;
      transform-origin: center center 0px;
      transition: all 0.5s ease-out;
      transform: perspective(1000px) rotateX(35deg) rotateY(4deg)
        rotateZ(-30deg);
      z-index: 1;
      display: flex;

      @media (max-width: 1100px) {
        width: 100%;
        transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
      }

      @media (min-width: 1101px) {
        &:hover {
          margin-top: 180px;
          transform: perspective(1000px) rotateX(0deg) rotateY(0deg)
            rotateZ(0deg);
        }
      }

      .card {
        margin: auto;
        height: min-content;

        a {
          color: inherit;
          text-decoration: none;
        }

        p:not(.name) {
          font-size: 1.8em;
          cursor: pointer;
          position: relative;
          overflow: hidden;
          background: linear-gradient(
            to right,
            rgba(67, 123, 241, 1),
            rgba(238, 174, 215, 1) 50%,
            white 50%
          );
          background-clip: text;
          -webkit-text-fill-color: transparent;
          background-size: 200% 100%;
          background-position: 100%;
          transition: background-position 0.7s cubic-bezier(0.85, 0, 0.15, 1);
          margin: 5px 35px;

          @media (max-width: 800px) {
            font-size: 1.4em;
          }

          &:hover {
            background-position: 0 80%;
          }
        }

        p.name {
          font-size: 1.8em;
          color: white;
          margin-bottom: 35px;

          @media (max-width: 800px) {
            font-size: 1.4em;
          }
        }
      }
    }

<div class="card-container">
        <div class="card">
          <p class="name">Pierre <b>Mathelin</b></p>
          <a href="mailto:pierre@uniqode-agency.fr"
            ><p>pierre@uniqode-agency.fr</p></a
          >
          <a href="tel:+33756866684"><p>+33 7 56 86 66 84</p></a>
        </div>
      </div>

chrome 或 firefox 上的结果 (????)：

Safari 上的结果（？？？？？？）：

你知道如何解决这个问题吗？

PS：我正在使用 VueJS 和 SASS 预处理器，因此通常会生成每个 -webkit-transform 或其他东西。

【问题讨论】：

标签： javascript css vue.js

【解决方案1】：

将position: relative; 添加到卡片容器可以解决我的 Safari (15.0) 版本中的问题。我不知道为什么它与 Chrome 和 Firefox 的工作方式不同，但这可能是因为 z-index。 Screenshot on Safari

【讨论】：

在 web 检查器中添加它似乎可以工作。所以我直接将它添加到我的 CSS 类中，在这种情况下，我需要在 Web 检查器中切换属性（取消选中并选中）以使其工作。多么奇怪的行为……
JS 中的快速修复（当然不是最好的）：window.addEventListener("DOMContentLoaded", function () { setTimeout(function () { document.querySelector(".card-container").style.position = "relative"; }, 100); });
这太奇怪了，我认为这可能是一个 Safari 错误。