WordPress站点中Flip Card Hover效果在iPhone Safari浏览器无法正常工作的求助

Hey there, I’ve fought this exact iOS Safari flip card bug more times than I can count — let’s break down why it’s failing and fix it step by step.

First, let’s cover the core issues with Safari’s handling of your current code:

• 3D Transform Prefixes: Even modern Safari can be finicky with unprefixed 3D CSS properties.
• Hover Doesn’t Work on Touchscreens: iOS doesn’t recognize "hover" like desktop browsers — it treats a tap as a one-time hover trigger, leading to broken, stuck states.
• Hardware Acceleration Glitches: Safari often needs a nudge to render 3D transforms correctly via GPU acceleration.

Here’s the fixed code that works across desktop browsers and iOS Safari:

Updated CSS #

.flip-card2 {
  background-color: transparent;
  width: 100%;
  height: 25rem;
  perspective: 1000px;
  -webkit-perspective: 1000px; /* Safari-specific perspective */
}
.flip-card-inner2 {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s ease;
  -webkit-transition: -webkit-transform 0.6s ease; /* Safari transition */
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d; /* Safari 3D style */
  -webkit-transform: translateZ(0); /* Force GPU acceleration */
  transform: translateZ(0);
}
/* Desktop hover behavior (kept for non-touch devices) */
.flip-card2:hover .flip-card-inner2 {
  transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg); /* Safari flip transform */
}
/* Touch-friendly flip state (toggled via JS) */
.flip-card2.flipped .flip-card-inner2 {
  transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg); /* Safari flip transform */
}
.flip-card-front2, .flip-card-back2 {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden; /* Safari backface hiding */
  border-radius: 0;
  -webkit-transform: translateZ(0); /* Force GPU acceleration for both sides */
  transform: translateZ(0);
}
.flip-card-front2 img{
  border-radius: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Optional: Ensure image scales without distortion */
}
.flip-card-back2 {
  background-color: #224d8e;
  color: white;
  transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg); /* Safari back flip */
}
.center_image_text2 {
  width: 90%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%); /* Safari centering */
  color: white;
  font-size: 1.6rem;
}
.center_image_text2 button{
  transition-duration: 0.3s;
  padding: 10px 20px;
  height: 55px;
  letter-spacing: 2.5px;
  color: white;
  border-color: white;
  background-color: transparent;
  border-radius: 20px;
  font-size: 22px;
  border: 2px solid white;
  cursor: pointer;
}
.center_image_text2 button:hover,
.center_image_text2 button:active { /* Add active state for touchscreens */
  border-color: black;
  color: white;
  background-color: black;
}

Touch-Handling JavaScript #

Add this script right before your closing </body> tag (or wrap it in a DOMContentLoaded listener) to handle iOS taps properly:

// Handle flip card taps on iOS
document.querySelectorAll('.flip-card2').forEach(card => {
  card.addEventListener('touchstart', function(e) {
    e.preventDefault(); // Prevent unwanted scrolling during tap
    this.classList.toggle('flipped');
  });
});

Key Fixes Explained #

• WebKit Prefixes: Added -webkit- versions of all 3D transform properties to ensure Safari recognizes and renders them correctly.
• GPU Acceleration: translateZ(0) forces Safari to render the card using the GPU, which fixes most 3D rendering glitches common in iOS.
• Touch-Friendly State: Replaced iOS’s broken hover behavior with a JS-powered flipped class, so tapping the card toggles its state reliably (tap once to flip, tap again to reset).
• Active Button State: Added :active to the button’s hover style so it responds to touch inputs on iOS.

Quick extra checks:

• Ensure no parent element of .flip-card2 has overflow: hidden — this can break 3D transforms in Safari.
• Test on real iOS devices (not just simulators) — simulators sometimes behave differently than actual hardware.

内容的提问来源于stack exchange，提问作者Stefos_Z