htmlcsswebkitchromiumcss-transforms

rotateY() with perspective not rendering correctly on WebKit

Problem

I'm trying to do a simple animation using rotateY() and perspective. It's working fine on Chromium, but not working on mobile Safari and Chrome. I'm not sure if this is a WebKit bug, if there are any workarounds, or if I'm simply missing something.

body {
  background: black;
  padding: 20px;
}

.container {
   position: relative;
   overflow: hidden;
   border-radius: 16px;
   perspective: 300px;
}

.border, .door {
   border: 8px solid white;
   width: 120px;
   height: 120px;
   border-radius: 16px;
}

.border {
   position: relative;
}

.door {
   position: absolute;
   top: 0;
   left: 0;
   transform: rotateY(80deg);
   transform-origin: left;
}
<div class="container">
   <div class="border"></div>
   <div class="door"></div>
</div>

How it looks on Chrome:

chromium door

How it looks on Webkit:

webkit door

What I've tried

I've tried using other properties such as:

Nothing seems to be working.

Weirdness

What's strange is when I inspect the webpage on Safari, it appears the browser IS recognizing the perspective rotation, it's just not rendering it to the screen. Here's what that looks like:

inspect element window

Any ideas?

Solution

  • Ah, well I fixed it. Wrapping everything in a new div and moving overflow: hidden there instead fixed the perspective issue.

    New code:

        body {
      background: black;
      padding: 20px;
    }

    .outer-container {
       overflow: hidden;
    }

    .container {
       position: relative;
       border-radius: 16px;
       perspective: 300px;
    }

    .border, .door {
       border: 8px solid white;
       width: 120px;
       height: 120px;
       border-radius: 16px;
    }

    .border {
       position: relative;
    }

    .door {
       position: absolute;
       top: 0;
       left: 0;
       transform: rotateY(80deg);
       transform-origin: left;
    }
        <div class="outer-container">
        <div class="container">
            <div class="border"></div>
            <div class="door"></div>
        </div>
    </div>