The issue of CSS transitions flickering in Internet Explorer

Can someone help me troubleshoot an issue with this code in Internet Explorer?

CSS:

.nav-fillpath a {
    width: 100px;
    height: 100px;
    position: absolute;
    display: block;
    bottom: 0%;
    left:0;
    right:0;
    color: #3e3e3e;
    margin-left:auto;
    margin-right:auto;
    outline: none;
    font-family: Arial;
    text-decoration: none;
    text-align: center;
    line-height: 1.4;
    z-index: 1000;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
}
.nav-fillpath a strong {
    color: #cd575b;
}

.nav-fillpath .icon-wrap {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.nav-fillpath a::before,
.nav-fillpath a::after,
.nav-fillpath .icon-wrap::before,
.nav-fillpath .icon-wrap::after {
    position: absolute;
    left: 50%;
    width: 2px;
    max-width: 2px;
    height: 50%;
    background: #3e3e3e;
    content: '';
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.nav-fillpath .icon-wrap::before,
.nav-fillpath .icon-wrap::after {
    height: 0;
    opacity: 0;
    background: #cd575b;
}

.nav-fillpath a::before,
.nav-fillpath .icon-wrap::before {
    top: 50%;
    -webkit-transform: translateX(-50%) rotate(125deg);
    transform: translateX(-50%) rotate(125deg);
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
}

.nav-fillpath a::after,
.nav-fillpath .icon-wrap::after {
    top: 50%;
    -webkit-transform: translateX(-50%) rotate(-125deg);
    transform: translateX(-50%) rotate(-125deg);
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;

}

.nav-fillpath h3 {
    position: relative;
    margin: 0;
    color: #fff;
    text-transform: uppercase;
    font-weight: 300;
    font-size: 0.85em;
    text-align: center;
    opacity: 0;
    display: block;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
}

.nav-fillpath a.next h3 {
    text-align: center;
    display: block;
    text-decoration: none;
}

.nav-fillpath a:hover .icon-wrap::before,
.nav-fillpath a:hover .icon-wrap::after {
    height: 50%;
}

.nav-fillpath a:hover::before,
.nav-fillpath a:hover .icon-wrap::before {
    -webkit-transform: translateX(-50%) rotate(135deg);
    transform: translateX(-50%) rotate(135deg);
}


.nav-fillpath a:hover::after,
.nav-fillpath a:hover .icon-wrap::after {
    -webkit-transform: translateX(-50%) rotate(-135deg);
    transform: translateX(-50%) rotate(-135deg);
}


.nav-fillpath a:hover h3 {
    opacity: 1;
    -webkit-transform: translateY(-100%) translateX(0%);
    transform: translateY(-100%) translateX(0%);
}

Check out the JSFiddle link below for reference:

http://jsfiddle.net/74Hzu/

The solution to resolve the flickering in Internet Explorer is to remove display: block; from this section:

.nav-fillpath .icon-wrap {
    position: relative;
    width: 100%;
    height: 100%;
}

For the updated version without flickering in Internet Explorer, visit this fixed JSFiddle link:

http://jsfiddle.net/74Hzu/4/

Despite setting 

-webkit-backface-visibility: hidden;
and backface-visibility: hidden;, the issue persists. Any suggestions on where the problem might lie?

htmlcssinternet-explorercss-transitions

Answer №1

To enhance compatibility, include -ms with every instance of -webkit in your code.

  • -webkit (for Webkit browsers like Chrome and Safari)
  • -o (for Opera)
  • -moz (for Firefox)
  • -ms (for Internet Explorer)

View Demo

Update:

The issue was resolved by removing display:block;

Answer №2

In my experience, changing the backface-visibility property in CSS to visible was the solution that worked for me.

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

Format specific words or characters in a text input

In HTML, when I want to display strings in a Text Input or TextArea, I am looking for a way to have specific substrings render with a box around them. I envision these boxed substrings as being treated as a single entity, similar to how highlighting or tex ...

javascripthtml

Creating a Conditional Structure in HTML: A Step-by-Step Guide

My website is in need of a form that can identify the user's role based on their name input. This feature is essential for individuals with private roles. Is it possible to achieve this using HTML alone, without relying on JavaScript? If not, what st ...

html

Continuously update the content within a paragraph using jQuery

After searching for a jQuery animation that would constantly change text within a paragraph, I stumbled upon a solution at this link : Text changing with animation jquery. However, I encountered a challenge as I wanted to include a bootstrap button beneath ...

javascriptjqueryhtmlcsstwitter-bootstrap

Smoothly transition the box shadow using CSS3's ease-in and ease-out effect

Struggling to achieve a smooth easing effect for a box shadow transition using CSS3. This is the current CSS code in use: #how-to-content-wrap-first:hover { -moz-box-shadow: 0px 0px 5px #1e1e1e; -webkit-box-shadow: 0px 0px 5px #1e1e1e; box-s ...

csshovercss-transitions

What steps can be taken to modify the `select` element in IE?

I came across a solution to display an arrow on a select element in this answer: select { width: 268px; padding: 5px; font-size: 16px; line-height: 1; border: 0; border-radius: 5px; height: 34px; background: url(http://cdn1 ...

css

Exploring the Terrain: Troubleshooting Meteor CSS with Twitter Bootstrap

Recently, I have encountered an issue that perplexes me - I am unable to debug less code in my meteor app when the twbs:boostrap package is present. Interestingly, everything works fine when I remove it, but as soon as I add it back, the CSS seems to be co ...

csstwitter-bootstrapdebuggingmeteorless

Issue with implementing jQuery tab functionality

I'm just starting to learn JS, HTML, and CSS, and I could use some guidance on setting up jQuery tabs. Currently, I'm encountering an error that says "Uncaught TypeError: $(...).tabs is not a function". Any help would be greatly appreciated. Than ...

javascriptjqueryhtml

import an external JavaScript file in an HTML document

Looking to load a .js file from a simple HTML file? If you have these files in the same folder: start.js var http = require('http'); var fs = require('fs'); http.createServer(function (req, response) { fs.readFile('index.htm ...

javascripthtmlnode.js

What is the best way to ensure uniform header height on cards or similar elements using flexbox?

Avoid using hacks Do not hard code the solution. The goal is to create a solution that works for dynamic content and responsive screen sizes, rather than just one specific case. The issue lies in the fact that the headers are not direct children of the e ...

jquerytwitter-bootstrapcssflexbox

Load Form with Json Data from LocalStorage Key-ID to Auto-Populate Fields

After successfully setting the ID in localStorage, I now need to retrieve and display only that specific record from my JSON data. The content of my localStorage is: This information is obtained from my JSON data after a button click. The challenge is us ...

javascriptjqueryajaxjsonhtml

Troubleshooting a problem with the Jquery cycle plugin in HTML and CSS

Hi there! I've successfully integrated the jQuery cycle plugin into my slideshow, which is working great. However, I want to make the navigation controls (previous, next, pause, play) display as background images instead of visible text links. I' ...

htmlcssjquery-cycle

A single click causes the entire row of cards to extend seamlessly

The cards on this tab were generated using a loop and the data is sourced from a database. When I click on the "Show More" button, the entire visible column expands along with it. The expansion does not reveal the content immediately; instead, the content ...

javascriptcssreactjsmaterial-uicss-grid

The mouse coordinates do not align with the drawing of a rectangle on the canvas

I am having some issues with drawing a rectangle on mouse drag over the canvas that is overlayed on an HTML5 video JS player. The rectangle is being drawn, but it does not align correctly with the mouse coordinates. I suspect that the canvas, which is ove ...

javascriptcsssasshtml5-canvas

Enable a button or class to dynamically alter its color

Hi there! I'm new to coding and just started learning HTML and CSS. My question is: How can I change the color of buttons once they are clicked? <div class="icon-bar"> <a href="#"><i class="fa fa-search" ...

javascripthtmlcss

Concealing columns in DataTables based on designated screen sizes

Issue I am facing a challenge with two DataTables — one with five columns and the other with four columns. My goal is to find a solution for hiding certain columns based on specific screen widths. Approaches I've Tested While resizing the browser ...

javascriptjquerycssdatatabledatatables

Animating changes on a webpage using CSS transitions in conjunction with the

Can the border color of a simple line div be changed from top to bottom using GreenSock? .line { position: relative; border: 1px solid #c3ced8; width: 0; height: 50px; display: block; content: ''; z-index: 1; top: -19px; marg ...

cssgsap

Is it acceptable for a video to autoplay even if it is not connected to the DOM?

Consider the following three scenarios: document.adoptNode, document.importNode, and document.createElement with assigned properties. In all cases, the video autoplay feature is activated even when it's not connected to the DOM. This behavior diffe ...

javascripthtmlvideo

The try and catch block in JavaScript is failing to correctly capture the HTTP status

I have a function that successfully posts JSON to an API endpoint. Here is the code I am using: function sendValuesPageLoad(){ var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { try { if (xhr.readyState === ...

javascripthtmljsonxmlhttprequest

Is your CSS failing to display images properly?

I recently launched my website, www.alphenweer.nl, and everything seems to be working fine except for the images in the template. Despite being on the correct URL, the images fail to load when the website is accessed. You can test it out here. Can someone ...

cssimage

Enhancing the appearance of multiple images with CSS and Bootstrap styling

I am struggling to arrange multiple images in my booking system as they are all displaying in a single column rather than the desired layout What I had hoped for was a layout like this Currently, I am using bootstrap to format the images. My goal is to i ...

csslaravel-8