Cube with 3D attributes and text displayed on each face shatters upon reaching a specific time limit on Google Chrome (between

The issue appears to be specific to Chrome. In Chrome, the 3D cube's face or multiple faces become transparent, giving the appearance that the animation is breaking. Sometimes adding "backface-visibility" after the break can temporarily resolve the issue until the next reload. It has been confirmed that adding this via JavaScript does not permanently fix the issue. It's worth noting that focusing on the element may prevent the issue from occurring.

To replicate the problem, follow these steps:

  1. Visit the link - https://jsfiddle.net/tk6bd38g/
  2. Copy the corresponding HTML and CSS code
  3. The issue usually occurs between 17-20 seconds, but it is intermittent and may take longer in some instances (up to 60 seconds)

Chrome version: 95.0.4638.69 Channel: stable OS Version: 10.0

Works correctly in the following browsers:

  • Firefox - v94.0.1
  • Microsoft Edge - Version 95.0.1020.40
  • Brave - Version 1.31.88 (Chromium: 95.0.4638.69)

Note: Since this might be a Chrome bug, I have reported the issue to Chrome dev team. I am exploring workarounds/solutions until then.

mybot {
  font-family: "Lato", sans-serif;
  ...
  
<mybot>
...
        </div>
</mybot>

htmlcssgoogle-chrome

Answer №1

It's puzzling why Chrome isn't cooperating while other browsers are, but it seems like the missing puzzle piece lies in the perspective attribute within the CSS.

Give this a shot:

mybot .mybotcubespinner {
  -webkit-animation-name: mybotspincube;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 10s;

  animation-name: mybotspincube;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 10s;

  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-perspective: 30000 ;

  -webkit-transform-origin: 50px 50px 0;
  -moz-transform-origin: 50px 50px 0;
  -ms-transform-origin: 50px 50px 0;
  transform-origin: 50px 50px 0px;
}

Take note of the -webkit-perspective property.

My hunch is that there may be some z-fighting occurring among the elements, and without adequate space, they end up colliding into the same coordinates, leading to this hiccup. It's a common occurrence in computer graphics.

While it's uncertain how different browsers handle this situation, implementing this alteration should resolve the issue specifically for Chrome.

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

Locate the parent element using a unique child element, then interact with a different child element

Can you help me come up with the correct xpath selector for this specific element? The element only has a unique href. Is it possible to locate the element by searching for the text iphone X within the href="#">iphone X and also checking for its paren ...

javascriptcssseleniumxpathprotractor

Python code displays output directly on an HTML webpage

I have created a basic Python chatbot that performs calculations and responds to user input. The chatbot continuously runs in Python, checking previous responses for context. I want to make this chatbot available online and achieve the following: Send us ...

pythonhtmlweb

Repositioning the final row to the bottom of the container in Bootstrap 4

I am working on a simple footer design that includes contact information in three rows. The first two rows should appear at the top, while the last row needs to be positioned at the very bottom of the container. To achieve this layout, I decided to use abs ...

csstwitter-bootstrapbootstrap-4

Show information from mysql in a dual-column format

I am pulling data from a single table in mysql, currently displaying it in one column. I want the data to be displayed in two columns next to each other. You can check out the results at www.urimsopa.com Here is my current code: $results = $mysqli->qu ...

phphtmlmysqlcss

I desire for the iframe to only display under specific conditions

Currently, I have embedded an iframe onto a live website that I am still working on. You can find the iframe with results here. The issue is that I want to keep it hidden from the public eye. Therefore, I am exploring if there is a way to modify the link ...

phphtmliframe

Altering the character by striking a key

I have a canvas with custom styling. In the center of the canvas is a single letter. Please see the code below for reference. The goal is to change the displayed letter by pressing a key on the keyboard. For instance: Letter A is centered in the canvas: P ...

javascripthtmlcssevents

Struggling with Duplicated Images

Currently working on a website using only HTML and CSS. I am still learning the ropes in this area. My goal is to create a layout with a header, body, and footer that repeat to fill up the entire page, similar to envato.com. Here is a snippet of the code I ...

csshtml

Animation of lava effect in Angular 7

I have a unique Angular 7 application featuring a homepage with a prominent colored block at the top, along with a header and various images. My goal is to incorporate lava effect animations into the background similar to this CodePen example. If the link ...

cssangulartypescriptangular-animations

Eliminate borders for text input in Bootstrap 3 styling

Trying to eliminate the top, right, and left borders for text input fields in Bootstrap 3. The selector being used is as follows: input[type="text"] { border-top: 0; border-right: 0; border-left: 0; } However, in Chrome, a faint thin line is ...

formstwitter-bootstrapcssinput

Incorporate a fontawesome icon into a dynamically created button using ajax

Is it possible to insert fontawesome icons into a button created using this code snippet? $.each(response, function (i, item) { trHTML += '<tr><td>' + item.name + '</td><td>' + "<input type='button&apo ...

javascriptjqueryhtmlajaxbutton

What is the best way to incorporate one Div within another Div using JavaScript?

I have a single main div with an id, and I am looking to insert 4 additional child divs inside it. Each of these child divs will then contain 5 more divs each. The code snippet that I currently have is as follows: $( document ).ready(function() { for( ...

javascriptjqueryhtmlfunction

Utilizing Vuejs to initiate a GET request using a method

Currently, I am working on enhancing the functionality of a GET request in Vue. My goal is to attach the request sending action to the form's submit button and also include a parameter from a text field within the form. HTML <html> <head> ...

javascripthtmlrestvue.jsget

The content spills over when applying the Bootstrap Grid system

I am working on creating a display heading that includes images on both the left and right sides of the heading. The layout looks great on larger displays, but as I shrink the display size, the text in the heading overflows the column on the right, causing ...

htmlcssbootstrap-4

In HTML, specify that the height of both the `html` and

I am facing an issue with the container-about div. I have set its height to 100% so that the div occupies the entire width and height after the header div. The problem is that currently, I cannot scroll to view the full text. It would be great if there wa ...

htmlcss

creating center-focused gradients in react native using LinearGradient

Hey there, I'm currently facing an issue with applying a box shadow to one of the buttons in my React Native application. Unfortunately, the box shadow property is not supported in Android. To work around this limitation, I am experimenting with creat ...

cssreactjsreact-nativelinear-gradients

Smoothly animate the height change of dynamically inserted content within a DIV using CSS transitions

Here is the template I am currently working with: <div class='content'> {{content}} </div> Along with the following style: .content { margin-top: 30px; background-color: skyblue; width: 300px; transition: all linear 0.5 ...

htmlcssangularjscss-transitions

JS editing an array in a datatable

I have created an HTML page where users can enter data, which is then uploaded to a SQL server. I have been studying DataTables to load an array into a table and tried editing it, but still haven't had success. Can anyone offer assistance? var array ...

javascripthtmldatatable

Retrieve information from api and showcase it in html

Recently, I came across an interesting API file that caught my attention: My goal is to extract information from this API and present it on a HTML page in a visually appealing format. Despite scouring various forums, I have yet to find a solution that fi ...

javascripthtmljson

Prevent clicking until the IE 10 and 9 windows have fully loaded

My goal is to prevent clicking on an image element until all the resources have finished loading, enabling the click only after the window.load() or when document.readystate reaches complete status. While this code works well in Chrome and Safari, I am fac ...

jquerycssinternet-explorerclickpointer-events

Interactions of selecting dates in datepicker widget

Currently, I am working on developing my personal work website. One issue I have encountered is with the calendar feature. The "From" date can be selected before today's date, which is not ideal. Additionally, if a date 5 days from now is chosen as th ...

javascriptjquerycssdate