Why can’t I rotate an overlapping element in Safari and iPhone properly?

Question

I wanted to rotate an overlapping element with the CSS function rotateY(), and everything seemed to look good in Chrome and Firefox with my laptop (MacBook Pro).

But when I saw the page on my mobile (iPhone XR), I realised that I could only see half of the overlapping element. That result also happens in my laptop with Safari and with other CSS functions like rotateX() and rotate3d().

A comparison of the unexpected results

I found a similar problem without any answer here: Safari Rendering Issues on Rotated Elements

I made a test in Chrome with a Samsung mobile, and the page worked well. It seems like the unexpected result only occurs in Safari and iPhone.

|                | Chrome | Firefox | Safari |
| --------------+-----------+----------+---------|
| Web          | ✅ | ✅ | ❌ |
| iPhone      | ❌ | ❌ | ❌       |
| Samsung | ✅          | ❓        | ❓       |

Then I began to change some lines of code, and I realised that if I do not write the CSS properties transition and will-change, the page works well in Safari and iPhone.

So I do not know if I am doing something wrong or if this is a bug in those browsers.

What is happening? Any idea?

Thanks

const button = document.querySelector('.btn');
const elements = document.querySelectorAll('.element');

button.addEventListener('click', handleButtonClick);

function handleButtonClick() {
  let isClicked = false;
  elements.forEach((element, i) => {
    let index = i + 1;
    if (element.classList.contains(`element-${index}`)) {
      element.classList.remove(`element-${index}`);
      isClicked = false;
    } else {
      element.classList.add(`element-${index}`);
      isClicked = true;
    }
  });
  isClicked ? button.textContent = 'Back' : button.textContent = 'Start';
}

.element {
  width: 100px;
  height: 100px;
  background-color: cornflowerblue;
  color: white;
  margin-bottom: 1rem;
  transition: transform 600ms;
  will-change: transform;
}

.container {
  position: relative;
}

.position {
  position: absolute;
  z-index: 1;
}

.element-1 {
  /* transform: rotateX(45deg); */
  transform: rotateY(45deg);
  /* transform: rotate3d(1,0,0,45deg); */
  /* transform: rotate3d(0,1,0,45deg); */
}

.element-2 {
  /* transform: rotateX(45deg); */
  transform: rotateY(45deg);
  /* transform: rotate3d(1,0,0,45deg); */
  /* transform: rotate3d(0,1,0,45deg); */
}

.color {
  background-color: coral;
}

.btn {
  margin-top: 2rem;
}

<div class="element">element 1</div>

<div class="container">
  <div class="element position color">element 2 front</div>
  <div class="element">element 2 back</div>
</div>

<button class="btn">Start</button>

UPDATE

In this case, if I write .element-2 {transform: translateZ(50px) rotateY(45deg);}, it works.

Although I still have doubts about why I need the function translateZ.

Why can’t I rotate an overlapping element in Safari and iPhone properly?

0 Answers0