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

Is there a way to activate a click event on a particular child element within a parent element?

When attempting to click on a specific descendant of an element, I located the ancestor using ng-class since it lacked an id. yes = document.querySelectorAll('[ng-controller = "inventoryController"]') Having found the desired ancestor, ...

javascripthtmlangularjs

Steps for displaying the dropdown menu

I am having trouble with displaying the dropdown menu when hovering over the class (dropbtn). I tried adding .dropdown:hover .dropdown-content-strategy{..} but it's not working as expected. If I do manage to show the dropdown menu, it stays visible ev ...

htmlcss

Hover effect not activating on image within modal

only img:hover is working, but after adding this to the CSS: #user-profile #user-myModal .modal-body img:hover #user-profile #user-myModal .modal-body .change-pic i{ display: block; } it's not working. I changed the class and id names, tried eve ...

htmlcsstwitter-bootstrapbootstrap-modal

Error: The variable "deleted1" is not declared and cannot be used on the HTML button element's onclick

Hello, I need assistance from someone. I encountered an error message after trying to delete a row even though I have declared the button already. Error: deleted1 is not defined at HTMLButtonElement.onclick Could it be due to the script type being modul ...

javascripthtmlfirebasegoogle-cloud-firestore

Is there a way to display a foundation.css drop-down menu using jQuery?

After attempting to create a navigation bar using foundation.css, I encountered an issue where the sub-menu does not appear when hovering over it with the mouse. The main question at hand is how to display the sub-menu of test on this specific webpage. D ...

javascriptjqueryhtmlcss

Discovering the initial word of a string using jQuery

I'm currently facing an issue with jQuery that I need help solving. Here's the scenario: I am creating tooltips and positioning them directly under a specific trigger using CSS. Everything is functioning correctly, but there is one problem: In ...

javascriptjqueryhtmlcsstooltip

Tips for resolving: 404 error when attempting to load a popup using Ajax

I am new to RoR, so I might be missing something. I am struggling with loading a popup through Ajax when a button is clicked. Every time I attempt it, I encounter an error related to the Ajax method as shown below. I believe my syntax is correct. I have ...

htmlruby-on-railsrubyselecthaml

A guide to accurately accessing form data in Jquery Ajax requests

My beforeSend function is not working properly, as the background color does not change. I suspect it may be due to not correctly referencing the id variable posted from the form. Below is the relevant HTML and JS code: HTML <div id="rec<?php echo ...

jquerycssajax

Test your knowledge of Javascript with this innerHtml quiz and see

How can I display the output of a score from a three button radio button quiz without using an alert popup? I want the output to be displayed within a modal for a cleaner look. I tried using InnerHTML but now there is no output when the button is clicked. ...

javascriptjqueryhtml

Making a dropdown menu spin using Jquery and Javascript

I am in need of a unique solution for a dropdown menu that appears rotated 90 degrees anticlockwise. The goal is to have the dropdown select "button" text displayed vertically, with the options sliding out in a similarly rotated, sideways manner featuring ...

javascriptjqueryhtmlcssrotation

Ensuring one div remains in a fixed position relative to another div

I'm struggling to keep my two white divs aligned in relation to the black div in the center. They need to maintain the same distance from the black div even when the page is resized. #halvfjerds { width: 100%; height: 1050px; background-color ...

htmlcss

ReactJS aligns buttons to the right

I have been attempting to align a button to the far right without success. Here is what I have tried: <Button variant="contained" style={{display: 'flex', justifyContent: 'right'}} color="primary" className="float-right" onClick={ ...

javascripthtmlcssreactjs

Style the labels on the axis of Frappe Charts with colors (potentially utilizing the appropriate CSS selector)

Is it possible to style the x and y axis labels in a Frappe chart with different colors? https://i.stack.imgur.com/A3vUq.png While trying to identify the CSS selectors using Chrome DevTools, I found that a single text element (representing an x axis labe ...

javascripthtmlcss

Creating HTML tables with PHP for dynamic web content

I am facing a minor issue while displaying my results in tables. Here is the code snippet: <?php //return data if any while ($client = mysqli_fetch_assoc($result)) { //output data form each client //var_dump($client); ?> < ...

phphtml

Positioning elements next to each other in jQuery on mouse over - while also addressing scrolling issues in a div

After tinkering with this interesting concept of mouseover combined with absolute positioning divs on a jsFiddle, I encountered some unexpected results. The code was inspired by a stackoverflow thread on positioning one element relative to another using j ...

javascriptjquerycssscrollbaronmouseover

Having trouble getting a background image to show up using node.js?

Hi there, I have a quick and simple question. I am attempting to include a div with a background-image in my *.ejs page file. <style> .signPage{ background-image: url("//back.jpg"); width: 98%; height: 98vh; top: ...

cssnode.jsejs

How can I retrieve the value from an input form using jQuery if it returns null?

Despite trying various methods, I have been unsuccessful in retrieving form values using jQuery and sending them in an AJAX GET request. The value keeps showing as null even after spending more than 18 hours on it. Any help would be greatly appreciated. $ ...

jqueryhtmljsonajaxget

Is there a way to align both the horizontal and rotated lines to intersect at a common point in HTML and CSS?

As a beginner, I'm looking to create a structure resembling a thigh, leg, and ankle using thick lines. My aim is to rotate them with animation, ensuring that the joints between the lines mimic those of a knee joint and hip joint. Below is the code sn ...

htmlcssweb

Iterating through an array with ngFor to display each item based on its index

I'm working with an ngFor loop that iterates through a list of objects known as configs and displays data for each object. In addition to the configs list, I have an array in my TypeScript file that I want to include in the display. This array always ...

htmlarraysangularjstypescriptangular

Tips for positioning slideshow below header in web design

I am currently working on enhancing the slideshow feature on my website. If you take a look at the image link provided below, you'll notice that the alignment of the slideshow is slightly off on both sides. Despite my attempts to adjust the CSS width ...

htmlcss