The visual effects of CSS 3D transformations vary between PCs and mobile devices, creating a distinct contrast

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

Answer №1

For optimal compatibility with various browsers, it is recommended to use prefixes in your CSS when using transforms, as shown in the example below:

  -webkit-transform: translate(-100%, 0);
 -moz-transform: translate(-100%, 0);
  -ms-transform: translate(-100%, 0);
   -o-transform: translate(-100%, 0);
      transform: translate(-100%, 0);


 -webkit-transition: -webkit-transform 1s ease-in;
     -moz-transition: -moz-transform 1s ease-in;
       -o-transition: -o-transform 1s ease-in;
          transition: transform 1s ease-in;

It's important to customize this code snippet according to your specific requirements.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating Outer Glow Effect on a Plane Primitive with THREEJS

Seeking guidance on creating a glow effect for a plane primitive in THREEJS. Found examples for cubes and spheres, but those involve encasing the object inside another transparent material, which is not suitable for my needs. The desired glow effect shoul ...

Switch classes while navigating within a div

My website has a sticky sidebar with a list of cars and their corresponding categories in a table: <ul class = "cars"> <li class=""><a href="javascript:void(0)" class="model" data-id="1"> BMW </a></li> ...... ...

Creating a custom transition rule in Stylus: A step-by-step guide

I need help creating a generic transition rule in Stylus. My current function is only working in specific cases, where it returns a string 'all ease-in-out 0.2s' instead of a proper CSS rule. This approach is not effective when trying to use it i ...

Having trouble with your Bootstrap 4 Dropdown Menu?

I attempted to implement the dropdown menu example from Bootstrap 4, but unfortunately it does not seem to be working as expected. The dropdown menu does not appear when clicked. <li class="nav-item dropdown"> <a class="nav-link dropdown-to ...

Is there a way to display x-overflow on a table instead of the window?

Check out the table at the following link: In my CSS, I set a min-width and overflow-x property for the table. However, on the mobile template, the overflow-x does not work properly. I want the template to display correctly with the header and footer in ...

Design your HTML select element with a unique custom arrow where the text elegantly appears over the arrow

I've encountered an issue with a select element in my HTML page that has a custom arrow. The problem is that the text within the select element overlaps with the arrow, which is not desired. I'm seeking a cross-browser solution for this specific ...

Splitting a CSS hierarchical list into horizontally aligned levels of hierarchy

I am trying to horizontally lay out an ordered list with multiple top level nodes while preserving the vertical layout of child nodes. For example, consider a basic list structure like this: <ol> <li>Top 1 <li>Sub 1</li ...

Tips for styling an array of objects using mapping techniques

I have an array of messages and I am currently using the map() function. Each message in the array has two keys - one for the author and another for the message content. What I want to achieve is to change the styles of the div tag when displaying the last ...

Enabling automatic scaling during the rendering of an .stl file using three.js

I'm in the process of developing a server/webpage with the following functionality: Users can upload an .stl file to be 3D-printed The server executes a mesh repair script on the uploaded .stl file The corrected .stl file is displayed in the user&ap ...

Adjustments to make for custom span and gutter width in Bootstrap's values

Looking to design a fixed layout with Bootstrap? Want to set span3 to 278px and gutter width to 12px for a total width of around 1142px? I tried the Customize tool on the Bootstrap site, but didn't get the desired result. Any advice on the correct val ...

Tips for creating a more flexible HTML container and resizing the navbar for mobile devices

In my current HTML code, I have 3 "col-md-4" divs within a row, each with a container--wrap to fill the webpage with 3 equally sized containers. These divs are placed inside another div with class = container-fluid. When I resize the window, the containers ...

Closing the Bootstrap 5 Navbar on Click Event

I'm not very familiar with Bootstrap and I came across this code online that involves javascript in html, which I don't fully understand. I want to make the hamburger menu close automatically after selecting an item in the navigation bar, especia ...

Optimizing HTML5 metatags and styles for a mobile application

As a C++ developer who has recently delved into using HTML5 for my mobile applications, I am in need of guidance when it comes to fine-tuning my meta tags. While I do have some knowledge in web programming, there are still gaps in my understanding. I am s ...

Arrangement of items in a grid with various sizes

I have encountered a challenge that I cannot seem to overcome. In my grid system, there are 18 identical items/boxes. I am looking to remove 4 of those items/boxes and combine them into one large item/box. Refer to the wireframe below for guidance on how ...

What is the best method for overlaying text on individual images in a slideshow?

Currently, I am delving into the world of jQuery, experimenting with various slideshows and attempting to incorporate text and effects. In my endeavors, I stumbled upon this codepen that served as an excellent template. However, when I tried adding text o ...

Select every p element that comes after an h2 tag using CSS

Is there a way to select all paragraph elements that come after a specific heading? <h2 class = 'history'>History</h2> <p>this is paragraph 1</p> <p>this is paragraph 2</p> <p>this is paragraph 3</p&g ...

Scroll the div that is dynamically filled without affecting the scrolling of the main page

My current struggle involves using iScroll in my web project. The goal is to populate a list with articles and slide in a div over the list to display the selected article. While the basic functionality is in place, I face an issue where scrolling through ...

What is the best way to ensure a button's size remains constant even when new text is inserted?

https://i.sstatic.net/K4QDt.png I created these buttons for a tic-tac-toe game as a way to improve my React skills. I'm aiming to have all the boxes form a perfect square shape. However, the box size changes when text is added. While I'm workin ...

Ensure that the Nivo Slider height is set to the accurate final value before the images finish loading

I've integrated Nivo Slider into my responsive website to display an image gallery. The slider spans 100% width and adjusts its height based on the aspect ratio of the images (all images have the same height). However, if the user's connection i ...

The interaction of flex-box in the presence of absolute positioning

Hey everyone, I need some help understanding why the flexbox is behaving oddly in this code snippet. 1. <!DOCTYPE html> <html> <head> <style> body{ position: relative; } .container { ...