Issues with width transitions in Edge when using the ::after pseudo-element

My CSS transitions on the ::after pseudo-element work perfectly in Chrome and Firefox, but not as expected in Edge. While the background color transition is functioning correctly, the width isn't.

You can view my current code here: http://codepen.io/anon/pen/ZbYKwv?editors=110

To showcase the transition clearly, I've increased the duration from 400 ms to 4000 ms. Additionally, I've added a white background to the <label> due to Edge's lack of support for a data URI SVG as a background image (in reality, I'm using a file which cannot be uploaded to CodePen).

Any suggestions on how I can make the width of the pseudo-element animate properly in Edge?

csscss-transitionspseudo-elementmicrosoft-edge

Answer №1

To ensure compatibility with all browsers, make sure to include the necessary prefixes in the transition rule:

-webkit-transition: all 4000ms ease;
-moz-transition: all 4000ms ease;
-ms-transition: all 4000ms ease;
-o-transition: all 4000ms ease;
transition: all 4000ms ease;

By doing this, your transitions should work seamlessly across different browsers.

Additionally, consider specifying a width value for the navigation bar when the #nav-toggle is checked, even if it matches the value set for .nav.

Note that Internet Explorer and Firefox can sometimes present issues with transitions involving max-width or max-height properties.

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

Reduced artwork slideshow on wide-screen phone orientation

Whenever I switch between portrait and landscape mode on my website, the gallery sizing becomes an issue. It looks good in portrait mode but ends up being too large in landscape mode, especially on my iPhone SE where it doesn't fit properly on the scr ...

htmlcss

Concealing a Div on Click Outside of Child Div in ReactJS

I have a parent div with a child div in the center. I am trying to figure out how to close the parent div only when clicking outside of the child div. My current code is structured like this, using triggerParentUpdate to control whether the div should be d ...

javascripthtmlcssreactjs

Element in the Middle

I have just started learning HTML and CSS, and I'm curious to know how I can center the links Home, About, and Contact in the header. HTML: <body> <header> <h1><a href="#">HBT</a> </h1& ...

htmlcss

What is the reason for Chrome not recognizing 'bottom: 0;' as a valid value for an absolutely positioned footer?

It seems like I may be facing a unique issue with my webpage layout in Chrome. The entire page is set up with absolutely positioned elements within a container that is relatively positioned. Although this setup is not typical, it was necessary for incorpor ...

htmlcss

The header and footer are not extending across the entire width of the page

While testing on a responsive screen, I noticed that the header and footer both decrease in width instead of maintaining 100% width as intended. The issue only occurs when I reduce the width of the screen. body{ margin: 0; padding: 0; box-si ...

htmlcssheaderfooter

Carousel displaying multiple cards with only one card visible per slide

I am currently using Bootstrap 5 to create a carousel with multiple cards, but I am facing an issue where only one card is displayed per slide. How can I modify it so that 3 cards are shown per slide? Should I utilize rows and columns for this purpose? A ...

htmlcssbootstrap-5bootstrap-cards

Tips for repositioning my sidebar using CSS and HTML

I'm a beginner in CSS and HTML and I'm struggling to make my sidebar move to the side on my website. I have divided my site into three div areas: one for the 'sidebar', one for the 'main content', and one for both called &apos ...

htmlcsssidebar

Trouble implementing media queries (code available)

Having trouble with my media queries, they're not working. Can someone please help me understand what's happening? Current screen size: 241 (chrome, ie, ff) CSS @media screen and (max-width: 500px) { body { width: 100%; ...

htmlcssmedia-queries

concealing the upper header while scrolling and shifting the primary header upwards

Is there a way to use CSS to move the main header navigation, including the logo and links, on my website up when scrolling down in order to hide the top black bar header that contains contact information? The website in question is atm.truenorthmediasol ...

javascripthtmlcsswordpress

What steps can I take to get rid of the 'Optimize CSS Delivery' notification on my website?

Utilizing Google's PageSpeed Insights to analyze my website's speed, I have identified an issue: Your page currently has 11 blocking CSS resources, resulting in slower rendering time. About 5% of the content above-the-fold could be displayed with ...

css

Controlling Material-UI using a custom .css stylesheet

Are there alternative methods for customizing Material-UI components using CSS stylesheets? I'm aware of the {makeStyles} method and JSS overrides, but I find it messy in the code and confusing when trying to modularize it in other files. Is there a ...

javascriptcssreactjsdesign-patternsmaterial-ui

Issue with background image positioning in IE 7 while scrolling

I am struggling with creating nested divs where the middle one has a fixed background image that remains static while the rest of the content scrolls. My solution works in Firefox, Chrome, and Opera but I'm encountering issues in IE7. Despite knowing ...

csshtmlbackground-imageinternet-explorer-7

Struggling to get the Hover feature on Link from Material-UI to function properly

I've been attempting to hover over Link from Material UI, but unfortunately, it's not working as expected. The CSS styles are not being applied for some unknown reason, and I can't seem to figure out why. Additionally, the Button class is al ...

cssreactjsmaterial-ui

Using flexbox to adjust the height of a block in the layout

Is there a way to modify the height of .half-containers1 and .half-containers2? Additionally, how can I create the triangle shape that is shown in the image? Is it achievable with CSS alone or do I need to use an image? Check out my fiddle for reference ...

htmlcssflexbox

What happens when absolute positioning looks for "relative" inside nested divs?

I'm struggling to grasp the concept of nested divs and how they work together. I understand that when you have a "position absolute" element inside a "position relative" element, the former looks for the latter as its reference point. But what happens ...

htmlcss

Is there a way to insert a record upon the user clicking on the Add Record button?

// Here is my Component code // I want to figure out how to add a new row to the table with fresh values. import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-uom', templateUrl: './uom.component.html ...

angularhtmlcss

The margin-bottom property displays correctly beneath a floating element on Chrome and FireFox, but fails to function on Internet Explorer 10

I am facing an issue with creating a margin underneath my floated element to separate it from the footer. The margin works perfectly in FireFox and Chrome, but not in Internet Explorer 10. Can anyone help me fix this problem? Here is the HTML code: <di ...

htmlcssfootercompatibilityinternet-explorer-10

Is the menu not appearing in the header section of the HTML/CSS?

Hey there, I'm a new student diving into the world of HTML/CSS. I've been working on creating a page layout, but for some reason my menu links are appearing under the header section instead of within it. I'm a bit confused and could really u ...

htmlcsscss-selectors

Ways to customize the appearance of a specific column in a k-grid td

While working with a kendo grid, I encountered an issue with setting a tooltip for one of the columns. After some experimentation, I discovered that in order for the tooltip to display correctly, I needed to override the overflow property on the k-grid td ...

htmlcssangularjskendo-uikendo-grid

While holding down and moving one div, have another div seamlessly glide alongside it

I have a scenario where two divs are located in separate containers. My goal is to drag div2 in container2 while moving div1 in container1. The 'left' property for both divs should remain the same at all times. I can currently drag each div indi ...

javascriptjquerycssjquery-uijquery-ui-draggable