I'm experiencing a rendering issue with a 3D transform.
On Chrome (PC/Mac), it appears as shown below: https://i.sstatic.net/pDbwN.png
However, on mobile devices using Safari or Chrome, the display is different: https://i.sstatic.net/1mQHl.jpg
When I only use a 2D transform, this problem does not occur on mobile devices.
Below is the code snippet:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no, minimum-scale=0.5, maximum-scale=0.5">
<meta name="format-detection" content="telephone=no">
<title>MIXER</title>
<style type="text/css">
/* CSS styles here */
</style>
</head>
<body>
<div id="canvas" style="height: 750px;">
<div id="0" style="transform: perspective(500px) rotateX(-10deg) rotateY(-20deg) ...">1</div>
<div id="1" style="transform: perspective(500px) rotateX(-8deg) rotateY(19deg) ...">2</div>
</div>
</body>
</html>
Despite adjusting the z-index and translateZ, the issue persists.
Breaking up the letters into separate cards like this:
https://i.sstatic.net/IixbO.png
has varied results due to the complexity of the transformation.
The curious thing is how the surface appears crossed in mobile Safari but straightens during an animation triggered by tapping the bottom-right button.
I suspect that on PC, the browser renders each div individually, while on mobile, all 3D elements are rendered at once. The behavior during the Safari animation remains puzzling.
Help me save my poor mobile view! https://i.sstatic.net/xsbBX.jpg