Is there a bug with Edge 40/15 opacity and visibility transition causing flickering during event propagation?

Previous versions of Edge displayed the correct transition effect. I am animating a div by adjusting opacity and visibility using CSS when its parent's hover event is triggered.

//LESS
&:hover .inside{
  //part that matters:
  visibility: visible;
  opacity: 1.0;
  transition-delay:0s;
}
.inside{
  //part that matters:
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 1s,opacity 1s ease;
}
//Pug
.wrapper
  .button text
    .inside more text

The issue.
In Chrome, IE 11, and Edge 25, the transition works smoothly. However, in newer versions, hovering over or leaving the button too quickly causes the opacity to jump back and forth during the transitions.
Here's an example: https://codepen.io/vtsells/pen/RZjLYP

Is this a bug or am I overlooking something? It's puzzling that older versions of Edge are functioning correctly.

Answer №1

The issue lies in your transition-delay:0s. To resolve this, adjust the value to a smaller setting like transition-delay: 0.01s.

Feel free to check out the functional CodePen example.

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

What is the process for choosing a table column by clicking on the "select" option?

Welcome to my project! Here is an example table that I'm working on. I have a question - how can I make it so that when I click on "choose me", the entire column is selected? Can you help me with this? <table> <tr> <th>plan A&l ...

The PHP-based registration process is malfunctioning

Trying to simply register, but I'm encountering an issue where the file is named Login.html/.php instead of just Login.html. Below is my HTML form in Login.html: <!DOCTYPE html> <html> <head> <title>Register/ Login</title&g ...

Aptana HTML Editor displays a blank page

Currently, I have Aptana set up as a plugin within Eclipse Neon. To create my HTML file, I used the template found at "New From Template => HTML => HTML 4.0.1 Strict Template (*.html)". The issue I am facing is that when I click on the file in the P ...

When I try running my JavaScript code in the console, it works perfectly fine. However, I encounter an error when I attempt

Recently, I added a cool JavaScript code to my website that changes the background of the landing page randomly. Here is the snippet: var bgImages = [ "url('assets/bg/front1.jpg')", "url('assets/bg/fro ...

Employing the HTML post method in conjunction with checkboxes

I am facing an issue while trying to use the HTML post function with PHP to insert a value of 1 or 0 into a database based on whether a user has checked a checkbox or not. Every time I submit the form, I encounter index errors regardless of the checkboxe ...

The H1 heading sets the stage, layered behind the captivating background image

I'm having trouble getting the h1 header to stand out over a background image with a box-like color for the header. Every time I make changes to the h1, they seem to be hidden behind the background image and only briefly show before being covered up. ...

How to Choose a Radio Button from a Group using Selenium WebDriver and Java

My goal is to be able to choose a specific radio button from a set of radio buttons grouped by the name attribute: <div> <input type="radio" name="exampleInputRadio" id="optionRadio1" value="1"> <input type="radio" name="exampleInpu ...

Dynamic extension of classes in SCSSORExtending classes

When working with Vue, I encountered a situation similar to :style="{ [`--chip-bg-hover`]: hoverColorValue, [`--chip-bg-active`]: activeColor, [`--chip-border-hover`]: borderHoverColorValue, }" Then, i ...

Understanding the differences between jquery's addClass method and the .css()

After creating a function to set a background on a click event, I encountered an issue. I attempted two different methods, expecting both to be successful. However, only the .css() version worked while the addClass method failed. Why is this happening? fu ...

What is stopping this paragraph from being vertically centered with just one line?

After following instructions from another user, I successfully centered text vertically. However, I encountered difficulties when trying to center the entire content vertically. My attempt to enclose the text in its own div did not yield the desired result ...

Ways to ensure the footer sticks to the bottom of the page when there is minimal content

Using Bootstrap 3.3.7 I am trying to ensure that my footer always stays at the bottom of the browser window. I prefer not to use a "sticky footer" as I don't want it to cover any part of my content. Currently, when there is enough content on the pa ...

Using CSS to create a background-clip effect on text along with a smooth opacity

I've coded a unique effect for my <h1> heading text where each letter is enclosed in its own <span> element, like this: <h1 class='gradient-heading' id='fade'> <span>H</span> <span>e</span ...

Is it possible to modify the global CSS in react-router according to the different routes?

I am attempting to customize a global CSS class (.ant-content) on a per-route basis. I have experimented with importing CSS files that override .ant-content for specific React components loaded in different routes. However, the issue is that these CSS fi ...

make sure the <option> tags fit seamlessly inside a Bootstrap card

I'm currently working on a project using Angular in combination with Bootstrap 4.0. My goal is to integrate <select>, <option>, and <optgroup> elements within a card. Below is the code snippet from the component.html file: <div ...

The ion-datetime in Ionic 4 ensures that the floating label always remains visible, even when the input

When an ion-datetime field in Ionic 4 has no value, the label always floats as shown below. Here is my code snippet: <form [formGroup]="statusHandlerForm"> <ion-item class="input-container " align-items-center no-padding> <ion-la ...

I would like to connect the button to a different webpage

Is it possible to connect this code with page number 2? <div class="login"> <h1>Login</h1> <form method="post"> <input type="text" name="u" placeholder="Username" required="required" /> <input type="password" name="p" ...

Is it possible to supersede CSS styling using a class name in React?

My <li> tag in my .css file has the following style: li { padding: 15px; background-color: #32383d; transition: 0.4s; border-bottom: 1.5px solid #464e53; color: #6b6d6d; font-family: "Poppins", Arial, sans-serif; cursor: pointer; } The issu ...

Steps for repairing a button positioned at the top of a nested container within a form

My search form includes side filters to help users narrow down their search, with the results appearing on the right. This is just a basic example, as my actual setup involves more filters. However, there is one issue – users have to scroll down the pag ...

Transitioning between sections by clicking on a navigation menu item

I'm looking to create a cool animation effect on my website. When a user clicks on a specific menu link, such as "about-section," I want the page to smoothly scroll down to that section in a parallax style. If anyone knows of a jQuery plugin that cou ...

Bring in the content to Notepad utilizing jQuery

How can I export data to Notepad? I have fields for Name, Age, and WorkingStatus that are input as text and textarea. Is there a demo or code available to help me insert this data into Notepad? ...