html - 在 Apple 设备中悬停时出现 CSS 故障

Question

链接视频:https://youtu.be/Uj7L98dpI4w
正如您在视频中看到的，在悬停事件中打开卡片时，我的 css 出现故障。此问题仅在 Apple 设备上发生，在 Windows 或 Android(以及 Safari、Chrome 或其他浏览器)上运行良好。我对这个问题一无所知。谢谢，请帮忙。源代码:

.card-section {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
}


/* A container to hold the flip card and the inside page */

.card-instruction {
  background-color: rgba(0, 0, 0, .05);
  box-shadow: -.1rem 1.7rem 6.6rem -3.2rem rgba(0, 0, 0, 0.5);
  height: 15rem;
  position: relative;
  transition: all 1s ease;
  -webkit-transition: all 1s ease;
  width: 15rem;
  text-align: center;
  margin-bottom: 36px;
}

@media (max-width: 768px) {
  .card-section {
    transform: scale(0.9);
    -webkit-transform: scale(0.9);
  }
  .card-instruction {
    margin-bottom: 16px;
  }
}


/* Flip card - covering both the front and inside front page */


/* An outer container to hold the flip card. This excludes the inside page */

.flip-card {
  height: 15rem;
  perspective: 100rem;
  position: absolute;
  right: 0;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
  visibility: hidden;
  width: 15rem;
  z-index: 100;
}


/* The outer container's visibility is set to hidden. This is to make everything within the container NOT set to hidden  */


/* This is done so content in the inside page can be selected */

.flip-card>* {
  visibility: visible;
}


/* An inner container to hold the flip card. This excludes the inside page */

.flip-card__container {
  height: 100%;
  position: absolute;
  right: 0;
  -webkit-transform-origin: left;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: all 1s ease;
  transform-origin: left;
  transform-style: preserve-3d;
  transition: all 1s ease;
  width: 100%;
}

.card-front,
.card-back {
  backface-visibility: hidden;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}


/* Styling for the front side of the flip card */


/* container for the front side */

.card-front {
  background-color: #fafbfa;
  height: 15rem;
  width: 15rem;
}


/* Front side's top section */

.card-front__tp {
  align-items: center;
  clip-path: polygon(0 0, 100% 0, 100% 90%, 57% 90%, 50% 100%, 43% 90%, 0 90%);
  display: flex;
  flex-direction: column;
  height: 12rem;
  justify-content: center;
  padding: .75rem;
}

.card-front__tp--city {
  background: linear-gradient( to bottom, #00c735, #008724);
}

.card-front__tp--ski {
  background: linear-gradient( to bottom, #d8db00, #999c03);
}

.card-front__tp--beach {
  background: linear-gradient( to bottom, #053bff, #021b75);
}

.card-front__tp--camping {
  background: linear-gradient( to bottom, #ff3300, #801900);
}


/* Front card's bottom section */

.card-front__bt {
  align-items: center;
  display: flex;
  justify-content: center;
}


/* Styling for the back side of the flip card */

.card-back {
  background-color: #fafbfa;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}


/* Specifically targeting the <video> element */

.card-back img {
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  width: 100%;
}


/* Inside page */

.inside-page {
  background-color: #f5ffff;
  box-shadow: inset 20rem 0px 5rem -2.5rem rgba(0, 0, 0, 0.25);
  height: 100%;
  padding: 1rem;
  position: absolute;
  right: 0;
  transition: all 1s ease;
  -webkit-transition: all 1s ease;
  width: 15rem;
  z-index: 1;
}

.inside-page__container {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  text-align: center;
  width: 100%;
}


/* Functionality ====================================*/


/* This is to keep the card centered (within its container) when opened */

.card-instruction:hover {
  box-shadow: -.1rem 1.7rem 6.6rem -3.2rem rgba(0, 0, 0, 0.75);
  width: 30rem;
}


/* When the card is hovered, the flip card container will rotate */

.card-instruction:hover .flip-card__container {
  transform: rotateY(-180deg);
  -webkit-transform: rotateY(-180deg);
}


/* When the card is hovered, the shadow on the inside page will shrink to the left */

.card:hover .inside-page {
  box-shadow: inset 1rem 0px 5rem -2.5rem rgba(0, 0, 0, 0.1);
}

<section class="card-section">
  <div class="card-instruction">
    <div class="flip-card">
      <div class="flip-card__container">
        <div class="card-front">
          <div class="card-front__tp card-front__tp--city">
            <i class="fas fa-clipboard-check fa-4x"></i>
            <h2 class="card-front__heading">
              Title
            </h2>
            <p class="card-front__text-price">
              Subtitle
            </p>
          </div>

          <div class="card-front__bt">
            <p class="card-front__text-view card-front__text-view--city">
              more
            </p>
          </div>
        </div>
        <div class="card-back">


          <img class="" src="https://www.w3schools.com/css/img_5terre.jpg" />
        </div>
      </div>
    </div>

    <div class="inside-page">
      <div class="inside-page__container">
        <p class="inside-page__text">
          Some text
        </p>

      </div>
    </div>
  </div>
</section>
</section>

Answer 1

实际上，您需要添加一些供应商前缀以使 CSS 与其他浏览器兼容。

.card-section {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
}


/* A container to hold the flip card and the inside page */

.card-instruction {
  background-color: rgba(0, 0, 0, .05);
  -webkit-box-shadow: -.1rem 1.7rem 6.6rem -3.2rem rgba(0, 0, 0, 0.5);
          box-shadow: -.1rem 1.7rem 6.6rem -3.2rem rgba(0, 0, 0, 0.5);
  height: 15rem;
  position: relative;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  -webkit-transition: all 1s ease;
  width: 15rem;
  text-align: center;
  margin-bottom: 36px;
}

@media (max-width: 768px) {
  .card-section {
    -ms-transform: scale(0.9);
        transform: scale(0.9);
    -webkit-transform: scale(0.9);
  }
  .card-instruction {
    margin-bottom: 16px;
  }
}


/* Flip card - covering both the front and inside front page */


/* An outer container to hold the flip card. This excludes the inside page */

.flip-card {
  height: 15rem;
  -webkit-perspective: 100rem;
          perspective: 100rem;
  position: absolute;
  right: 0;
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  visibility: hidden;
  width: 15rem;
  z-index: 100;
}


/* The outer container's visibility is set to hidden. This is to make everything within the container NOT set to hidden  */


/* This is done so content in the inside page can be selected */

.flip-card>* {
  visibility: visible;
}


/* An inner container to hold the flip card. This excludes the inside page */

.flip-card__container {
  height: 100%;
  position: absolute;
  right: 0;
  -webkit-transform-origin: left;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: all 1s ease;
  -ms-transform-origin: left;
      transform-origin: left;
  transform-style: preserve-3d;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  width: 100%;
}

.card-front,
.card-back {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}


/* Styling for the front side of the flip card */


/* container for the front side */

.card-front {
  background-color: #fafbfa;
  height: 15rem;
  width: 15rem;
}


/* Front side's top section */

.card-front__tp {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 57% 90%, 50% 100%, 43% 90%, 0 90%);
          clip-path: polygon(0 0, 100% 0, 100% 90%, 57% 90%, 50% 100%, 43% 90%, 0 90%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 12rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: .75rem;
}

.card-front__tp--city {
  background: -webkit-gradient( linear, left top, left bottom, from(#00c735), to(#008724));
  background: -o-linear-gradient( top, #00c735, #008724);
  background: linear-gradient( to bottom, #00c735, #008724);
}

.card-front__tp--ski {
  background: -webkit-gradient( linear, left top, left bottom, from(#d8db00), to(#999c03));
  background: -o-linear-gradient( top, #d8db00, #999c03);
  background: linear-gradient( to bottom, #d8db00, #999c03);
}

.card-front__tp--beach {
  background: -webkit-gradient( linear, left top, left bottom, from(#053bff), to(#021b75));
  background: -o-linear-gradient( top, #053bff, #021b75);
  background: linear-gradient( to bottom, #053bff, #021b75);
}

.card-front__tp--camping {
  background: -webkit-gradient( linear, left top, left bottom, from(#ff3300), to(#801900));
  background: -o-linear-gradient( top, #ff3300, #801900);
  background: linear-gradient( to bottom, #ff3300, #801900);
}


/* Front card's bottom section */

.card-front__bt {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}


/* Styling for the back side of the flip card */

.card-back {
  background-color: #fafbfa;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}


/* Specifically targeting the <video> element */

.card-back img {
  height: 100%;
  min-height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
}


/* Inside page */

.inside-page {
  background-color: #f5ffff;
  -webkit-box-shadow: inset 20rem 0px 5rem -2.5rem rgba(0, 0, 0, 0.25);
          box-shadow: inset 20rem 0px 5rem -2.5rem rgba(0, 0, 0, 0.25);
  height: 100%;
  padding: 1rem;
  position: absolute;
  right: 0;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  -webkit-transition: all 1s ease;
  width: 15rem;
  z-index: 1;
}

.inside-page__container {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  text-align: center;
  width: 100%;
}


/* Functionality ====================================*/


/* This is to keep the card centered (within its container) when opened */

.card-instruction:hover {
  -webkit-box-shadow: -.1rem 1.7rem 6.6rem -3.2rem rgba(0, 0, 0, 0.75);
          box-shadow: -.1rem 1.7rem 6.6rem -3.2rem rgba(0, 0, 0, 0.75);
  width: 30rem;
}


/* When the card is hovered, the flip card container will rotate */

.card-instruction:hover .flip-card__container {
  transform: rotateY(-180deg);
  -webkit-transform: rotateY(-180deg);
}


/* When the card is hovered, the shadow on the inside page will shrink to the left */

.card:hover .inside-page {
  -webkit-box-shadow: inset 1rem 0px 5rem -2.5rem rgba(0, 0, 0, 0.1);
          box-shadow: inset 1rem 0px 5rem -2.5rem rgba(0, 0, 0, 0.1);
}

<section class="card-section">
        <div class="card-instruction">
            <div class="flip-card">
                <div class="flip-card__container">
                    <div class="card-front">
                        <div class="card-front__tp card-front__tp--city">
                            <i class="fas fa-clipboard-check fa-4x"></i>
            <h2 class="card-front__heading">
              Title
            </h2>
            <p class="card-front__text-price">
              Subtitle
            </p>
          </div>

          <div class="card-front__bt">
            <p class="card-front__text-view card-front__text-view--city">
              more
            </p>
          </div>
        </div>
        <div class="card-back">


          <img class="" src="https://www.w3schools.com/css/img_5terre.jpg" />
        </div>
      </div>
    </div>

    <div class="inside-page">
      <div class="inside-page__container">
        <p class="inside-page__text">
          Some text
        </p>

      </div>
    </div>
  </div>
</section>

我已经在 safari 上测试过它，它工作正常。