CODEWITHSUNDEEP
htmlcss
Son Bui
Son Bui

Reputation: 33

CSS glitch on hover in Apple devices

link video: https://youtu.be/Uj7L98dpI4w

As you see in the video my css got glitch when open card on hover event. This issue only happens on Apple devices, on Windows or Android (also Safari, Chrome or other browsers) it works fine. I have no clue for this problem. Thanks and please help. Sourcecode:

.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>

Upvotes: 2

Views: 136

Answers (1)

thelovekesh
thelovekesh

Reputation: 1452

Actually, you need to add some vendor prefixes to make CSS compatible for other browsers.

.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>

I have tested it on the safari and it's working fine.

enter image description here

Upvotes: 2

Related Questions