Having trouble getting the Card Flip animation to work in IE using HTML and CSS

This specific card clip HTML component is designed with only HTML and CSS, which performs well except on IE11. In IE11, there is a noticeable slowdown and lag. Interestingly, when I remove the backface-visibility:hidden property, the component functions perfectly in IE11. However, this property is essential for the desired effect.

What potential solutions or workarounds could address this issue?

Visit this link to view the code example

<div class="card">
  <div class="card__side card__side--front">

  </div>

  <div class="card__side card__side--back ">

  </div>
</div>

CSS

 .card {
  width: 200px;
  perspective: 150rem;
  -moz-perspective: 150rem;
  position: relative;
  height: 52rem;

}
.card__side {
  border-radius: 3px;
  overflow: hidden;
  background: #808080;
  height: 50rem;
  width: 100%;
  transition: all 800ms ease;
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;
}
.card__side--front {
  background: red;
  z-index: 1;

}
.card__side--back {
  transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
}
.card:hover .card__side--front {
  transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
}
.card:hover .card__side--back {
  transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
}

html {
  font-size: 5px;
}

Answer №1

Transition in Internet Explorer is causing the issue. If you don't necessarily need to use 2 div elements, you could try something like this:

   <div class="card">

  <div class="card__side card__side--back ">

  </div>
</div>



   .card {
  width: 200px;
  perspective: 150rem;
  -moz-perspective: 150rem;
  position: relative;
  height: 52rem;

}
.card__side {
  border-radius: 3px;
  overflow: hidden;
  background: #808080;
  height: 50rem;
  width: 100%;
  transition: all 800ms ease;
  position: absolute;
  top: 0;
  left: 0;
  //backface-visibility: hidden;
}

.card__side--back {

  transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}

.card:hover .card__side--back {
  transform:  rotateY(0deg);
   background: red;
  -ms-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
}

html {
  font-size: 5px;
}

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

I am having trouble retrieving images from the backend API. Can someone assist me in resolving this issue?

I am facing an issue while trying to upload an image along with its details. I am able to retrieve all the information but the image is not displaying in the browser. My backend API is built using PHP Laravel and the images are stored in the Storage/app/ap ...

The collapsible toggle feature is currently not working as intended

I have tried looking for solutions but have not been successful. My apologies for asking what may seem like a simple question. The toggle button is not expanding to show the menu items when clicked. It works fine on the "home" page but not on the linked pa ...

Is it time to switch out HTML tables for Divs?

I am looking for advice on creating a consistent header for all of my website pages. Currently, I use a div element to wrap a table that contains one row with three cells. These cells hold three images: one in the top-left corner, one in the top-center, a ...

A guide to sending HTML emails with the Linux command line

I am in search of a solution to send emails in HTML format using only the Linux command line and the "mail" command. So far, I have tried the following: echo "To: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="99f8fdfdebfceae ...

How can I enable two-finger scrolling on mobile web browsers?

I am currently tackling a project that involves dragging operations on a canvas, making scrolling with a single finger impractical. My goal is to enable scrolling using two fingers instead. After testing different touch-action values, I discovered that pi ...

Using JavaScript to modify the text of a label seems to be a challenging

UPDATE: After carefully reviewing my code once again, I have identified the issue. The problem lies in the positioning of a certain function (unfortunately not included here), but rest assured that I have rectified it! Allow me to provide a brief summary ...

The circle border-radius is refusing to slide to the center of the screen

I'm having trouble moving the top circle to the center, while the bottom three circles are displaying correctly. I need to adjust the text and icon placement in the circles to be centered. Additionally, I want the layout to be responsive across differ ...

XML integration with Jplayer is not functioning properly

I'm in the process of setting up Jplayer to work with an XML document so that my client can easily update the playlist. I managed to get it working flawlessly when I manually coded the songs into the JS. Here's my current code: <div class="bo ...

What is the best way to align the content of an HTML page in the center using

I'm currently working on a basic webpage and I'm trying to center it using only Bootstrap code (if possible). This is what I have tried so far, but the col-xl-offset-4 doesn't seem to be working. <script src="https://ajax.googleapis.co ...

What is the best way to ensure a specific section of a website remains visible and fixed at the bottom of the page

I want to set up a simple toolbar with divs and uls containing both anchors and tabs. The position of the toolbar needs to be fixed at the bottom of the page. <%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...

Changing Meteor Template to a Node.js/AngularJS Conversion

My current website is built with Meteor using templates structured like this: <body> {{>section1}} {{>section2}} {{>section3}} </body> <template name="section1"> <h1>This is Section 1</h1> </template> ...

Utilize JavaScript to load an external script at the bottom of the body for improved website performance

On my website, I am utilizing the Mobile ESP script to determine whether visitors are accessing it from a mobile device or desktop. Depending on the type of device, I dynamically load the necessary scripts and CSS stylesheets for optimal navigation. Howev ...

Dynamically adjust the image link in responsive mode to improve user experience

Is there a way to dynamically change the image links in responsive mode on WordPress? I am displaying thumbnails with a fixed size of 280*200, but I want to switch to medium-sized thumbnails (480*200) when the resolution is between 480px to 600px. Is there ...

What could be causing the if statement to evaluate as false even though the div's style.display is set to 'block'?

Building a react application using createreactapp and encountering an issue with an if statement that checks the CSS display property of a div identified as step1: const step1 = document.getElementById("step-1") if (step1.style.display === 'blo ...

Unable to set the correct title view for mobile devices

We have successfully styled the products for desktop view and larger phones, but we are facing challenges in adjusting them properly for smaller phones. Below you will find a photo and corresponding code snippets: /* Products list - view list */ .product ...

Guide to implementing proportional height for an element using JQuery 3.3.1

I am currently working on dynamically setting the heights of elements with a specific class using JQuery in order to achieve a 16:10 ratio based on their width. However, I'm encountering an issue where the height doesn't seem to be applied and re ...

Looking to spice up your email template with stacked elements?

For a challenging task of creating an email template, I encountered a problem with stacking one element on top of another: Usually in HTML/CSS, it would look like this: <div class="element"> <div class="icon"></div> <div class="c ...

The Bootstrap modal backdrop is now displaying prominently in front of the modal following the latest Chrome update

Chrome version: Version 111.0.5563.64 (Official Build) (x86_64) Bootstrap: 4.3.1 Recently, there has been an issue with the modal backdrop appearing in front of the modal itself after a Chrome update. The problem does not seem to be related to z-index, an ...

The overflow of CSS text selection color spills beyond the boundaries of the box

I'm just starting to learn CSS and was wondering if there is a way to prevent the text selection color from extending into the 'gutter' (I believe that's the correct term) like shown here: It may seem trivial, but I've observed th ...

Which is better: CSS gradients or background images?

Years ago, I came across many CSS codes that used background-image: url(xxx.png) to mimic a gradient background filter, as only (please correct me if I'm mistaken) IE's proprietary filter could achieve a CSS gradient. In today's world - giv ...