svg animation code may not be functional on Edge browser, while it operates smoothly on all other browsers

I've been experimenting with a svg typewriter effect by setting dashoffset and dasharray to 1000 or 500. The animation works on Chrome, Safari, Firefox, and my PC, but it doesn't work on Microsoft Edge.

I'm struggling to make it work specifically with dasharray and dashoffset properties.

@-webkit-keyframes curse {
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes curse {
  100% {
    stroke-dashoffset: 0;
  }
}

#dot1 {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  -webkit-animation: curse 12s linear forwards;
  animation: curse 12s linear forwards;
}
...
... (more CSS code)
...
#Iline {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  -webkit-animation: curse 1s linear forwards 2.1s;
  animation: curse 1s linear forwards 2.1s;
}

#O3line {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  -webkit-animation: curse 0.6s linear forwards 2.38s;
  animation: curse 0.6s linear forwards 2.38s;
}
<svg version="1.1" id="Layer_0" xmlns="http://www.w3.org/2000/svg" ... >
<g id="R_1_">
<!-- Embedded SVG paths -->
</g>
</svg>

I have experimented with various values for the properties, but still no luck in making it work.

htmlcssanimationsvgmicrosoft-edge

Answer №1

It's worth noting that as of January 2019, animating the stroke-dashoffset property is not currently supported in Microsoft Edge. Given Microsoft's history of slow improvements to Edge, it's unlikely to be fixed anytime soon.

You can find more information about this issue at this link.

Unfortunately, my suggestion would be to display the animated content correctly on browsers other than IE/Edge, and simply show the final result on IE/Edge so users still have some visual experience on the page. If you need to identify the user's browser, you can refer to this resource.

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

Ensure the div remains fixed in its position regardless of the page's height

I am seeking assistance with making two divs of equal height on my website. The left div contains dynamic content that may expand vertically with various inner divs. Meanwhile, the right div has a single inner div that should remain visible at the top ev ...

htmlcssbootstrap-4

Clicking on a jQuery element will reveal a list of corresponding elements

I've retrieved a list of elements from the database and displayed them in a table with a button: <a href="#" class="hiden"></a> To show and hide advanced information contained within: <div class="object></div> Here is my jQ ...

javascriptjqueryhtmltoggle

What is the process for incorporating an npm package into an HTML document?

Here is the code from my HTML file: <!DOCTYPE html> <head> ... </head> <body> ... <script src="script.js"></script> </body> This is what I have in my JavaScript file named script.js: import * as File ...

javascripthtmlnode.jsnpmfrontend

Confusion between Codeigniter's URL and base_url() function

$config['base_url'] = 'localhost/project'; <link href="<?= base_url(); ?>/css/bootstrap.min.css" rel="stylesheet"> An issue arises with the CSS not loading on the view due to a double '/' in the URL. This occur ...

phphtmlcsscodeigniter

Could anyone provide assistance with creating responsive CSS styles for a website?

I am currently utilizing Drupal for my website. In my kickstart sub theme, which is a subtheme of omega, I have added a sitename and slogan. Additionally, I inserted a telephone number through the branding.tpl.php file. However, when I resize the window, t ...

cssdrupalresponsive-designthemesstylesheet

Storing parent entity along with child entities containing selected properties using ASP.NET Core MVC

Working on an ASP.NET Core MVC web app, I encountered a problem that can be best explained through this example: Let's consider a scenario where the user needs to save information about a book including its title, number of pages, and one or more aut ...

c#htmlasp.net-mvcasp.net-coreparent-child

Removing CSS errors from HTML files in Visual Studio Code on a Mac

Currently, I am utilizing Visual Studio Code on a Mac for writing AngularJS style HTML. Whenever I try to include an inline expression for a CSS value, I encounter an irritating red Intellisense error, as displayed in the screenshot provided below. It is w ...

cssangularjsmacosvisual-studio-codeintellisense

Steps to create a floating navbar using tailwindcss

Here is the code snippet for the site header component: export function SiteHeader() { return ( <header className="fixed top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60&qu ...

csstailwind-css

Applying a margin to a CSS div at the bottom may cause it to not

I'm struggling to achieve the desired outcome with my layout: https://i.stack.imgur.com/CvLFl.png I have successfully replicated the image, but only when my div is not floating on the page (without margin applied and without using position: absolute ...

css

Issue with Angular: Unable to locate a differ that supports the object '[object Object]' of type 'object'. NgFor is only compatible with binding to Iterables such as Arrays

As someone who is new to Angular, I am facing a challenge while working on my portfolio project. The issue arises when trying to receive a list of nested objects structured like this: "$id": "1", "data": { &quo ...

htmlarraysjsonangulartypescript

Is it possible to modify the color of a bootstrap navbar dropdown upon clicking?

I am having trouble changing the color of a bootstrap navbar dropdown link when it is clicked. Currently, the color changes to teal for a moment but then reverts back to the default gray. Here is my current CSS: li.dropdown:active { background- ...

csstwitter-bootstrap

Real-time web page parsing in JAVA is dynamic and constantly evolving

My goal is to create a GUI application in Java that retrieves data from sports live score pages. I am new to this, so please excuse any basic questions. Essentially, I want to extract information from sites like: http://www.futbol24.com/Live/ http://liv ...

javaparsinghtml

Issues with Drop Down CSS on Laravel Blade files

In my view, I have included various drop down menus such as https://i.sstatic.net/0UHgE.png Click here to access I am struggling to display a border bottom. I have attempted to manually define border-bottom in the CSS of those elements but have not been ...

htmlcss

Assistance required: Click on the button to select and copy all text within the specified paragraph ID

Hey there! I've got a div with a dropdown menu that reveals text and images based on the selected option. What I want to achieve is having a button that allows users to copy all the content inside the div. Below is my sample code for the div dropdown ...

javascriptjqueryhtmlcss

Is the parent node of the input element the input element itself?

When working with a DOM object obj of type <input>, I encountered an issue where attempting to obtain its parent node using obj.parentNode resulted in the same obj being returned. Is this behavior specific to <input> objects? What other types o ...

javascripthtmldom

Exploring the Benefits of Incorporating Multiple Navigations into a JQuery Slider

I'm looking to enhance the functionality of the main slider on this particular page. Currently, there are left and right arrows as well as grey and blue boxes underneath that allow users to navigate between four slides (which repeat using only two ima ...

jquerycssslider

What is the typical output value that fluctuates?

I only have one input to work with. My goal is to set the input value to "5", then display "3" in the "total" field and "4" in the "total2" field. Additionally, for every increment of +1 to the input value, I want the "total" and "total2" fields to also in ...

javascripthtml

Sort PHP results by the initial letter of the name in a stylish manner

Hello, I am attempting to organize categories by the first letter and format them using ul and li elements. Here is my code: $Sql = "SELECT *, COUNT(Cup_Id) AS num FROM tabcup INNER JOIN tabcats ON tabcupom.Cat_Id = tabcats.Cat_Id ...

phphtmlmysqlloops

What is the best way to reset an event back to its original state once it has been clicked on again

As a newcomer to web development, I'm currently working on creating my own portfolio website. One of the features I am trying to implement is triangle bullet points that can change direction when clicked - kind of like an arrow. My idea is for them to ...

javascriptcssfrontend

What is the best way to implement backup style attributes for a React JS component?

Is there a method to implement fallback style properties for a component? For example: var inlineStyle = { display: '-webkit-box', display: '-webkit-flex', display: '-moz-box', display: '-moz-flex', ...

javascriptcssreactjs