Hey there! Let's tackle this Mobile Safari card flip issue—those WebKit-specific quirks can be super frustrating, especially when you're trying to get a clean before/after image comparison working. 😤

Here are the most common fixes for the "flip works but images don't display correctly" problem in Mobile Safari:

1. Lock in backface-visibility with prefixes #

Mobile Safari often ignores unprefixed backface-visibility and needs it applied consistently across the card container, front, and back faces. Don't skip the -webkit- prefix here—it's still critical for older and current Safari versions.

Try updating your CSS to this structure:

/* Container with perspective */
.flip-container {
  perspective: 1000px;
  -webkit-perspective: 1000px; /* Safari-specific */
}

/* The card itself */
.flip-card {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s ease;
  -webkit-transition: -webkit-transform 0.6s ease;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  will-change: transform; /* Hint to Safari's renderer */
  -webkit-will-change: -webkit-transform;
}

/* Front and back faces */
.flip-card-front, .flip-card-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden; /* Non-negotiable for Safari */
  overflow: hidden; /* Prevent image spillover */
}

/* Flip the back face */
.flip-card-back {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}

2. Fix image rendering behavior #

Mobile Safari can mess up image sizing in 3D contexts. Make sure your <img> tags have explicit sizing to avoid stretching or disappearing:

.flip-card-front img, .flip-card-back img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Keep aspect ratio, fill the container */
}

3. Remove conflicting transforms #

If you've added transform: translateZ(0) to parent elements for GPU acceleration, this can break the 3D flip context in Safari. Try removing that property from any containers above the flip card—you already have will-change to help with rendering.

4. Check for parent container interference #

Avoid position: fixed or overflow: hidden on parent elements of the flip container, as these can disrupt Safari's 3D rendering stack. If you need overflow control, apply it directly to the front/back faces instead.

If none of these fixes work, feel free to share a more complete snippet of your HTML/CSS (even a stripped-down version) and I can help dig deeper!

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