Z-index does not work for iOS browsers

Questions
1

I was wondering if the following z-index problem was a known issue and if there is a workaround:

On my laptop (Mac OS), the following renders fine
laptop

However, on my mobile (iPhone + Chrome), the z-index is messed up.

mobile
mobile1284×662 21.9 KB

Here my html

<div>
    <div class="abs one"></div>
    <div class="abs two"></div>
    <div class="abs three" id="three-wrapper"></div>
</div>

Here my css

.abs {
  position: absolute;
  width: 100px;
  height: 100px;
}
.one {
  top: 0px;
  left: 0px;
  background-color: red;
  z-index: 3;
}
.two {
  top: 50px;
  left: 50px;
  background-color: green;
  z-index: 2;
}
.three {
  top: 100px;
  left: 100px;
  background-color: blue;
  z-index: 1;
}

and here is my javascript:

      const w = 100;
      const h = 100;
      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera( 75, w / h, 0.1, 1000 );

      const renderer = new THREE.WebGLRenderer();
      renderer.setSize( w, h );
      const wrapEl = document.getElementById('three-wrapper');
      wrapEl.appendChild(renderer.domElement);

      const geometry = new THREE.BoxGeometry( 1, 1, 1 );
      const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
      const cube = new THREE.Mesh( geometry, material );
      scene.add( cube );

      camera.position.z = 5;

      function animate() {
        requestAnimationFrame( animate );

        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;

        renderer.render( scene, camera );
      }

      animate();

Thank you for taking a look!

2

Is that the complete related CSS / JS ? Could you shares a codepen replicating the issue?

Background in your screenshots is black, which is not in your CSS. And the code you shared does seem to work nicely, sorting the elements as expected, on iOS when put into codepen :thinking:

3

Hello and thank you for your reply.

I am actually using Ionic with VueJS, and I have just copied out the relevant code from my testing page.
(SimpleLayout is a component that simply bundles up IonPage and IonContent)
The whole thing is shown through a router-outlet.
I wonder if that could have an effect.

<template>
  <simple-layout>
    <div class="abs one"></div>
    <div class="abs two"></div>
    <div class="abs three" id="three-wrapper"></div>
  </simple-layout>
</template>

<script>
import * as THREE from 'three';
import SimpleLayout from '@/components/_ui/SimpleLayout.vue';

export default {
  components: {
    SimpleLayout,
  },
  data() {
    return {
    };
  },
  mounted() {
    this.startThree();
  },
  
  methods: {
    startThree() {
      const w = 100;
      const h = 100;
      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera( 75, w / h, 0.1, 1000 );

      const renderer = new THREE.WebGLRenderer();
      renderer.setSize( w, h );
      const wrapEl = document.getElementById('three-wrapper');
      wrapEl.appendChild(renderer.domElement);

      const geometry = new THREE.BoxGeometry( 1, 1, 1 );
      const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
      const cube = new THREE.Mesh( geometry, material );
      scene.add( cube );

      camera.position.z = 5;

      function animate() {
        requestAnimationFrame( animate );

        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;

        renderer.render( scene, camera );
      }

      animate();
    },

  },
}
</script>

<style scoped>
.abs {
  position: absolute;
  width: 100px;
  height: 100px;
}
.one {
  top: 0px;
  left: 0px;
  background-color: red;
  z-index: 3;
}
.two {
  top: 50px;
  left: 50px;
  background-color: green;
  z-index: 2;
}
.three {
  top: 100px;
  left: 100px;
  background-color: blue;
  z-index: 1;
}

</style>