SVG animation not functioning as expected in Mozilla Firefox

Recently, I created a drawing animation on an SVG logo for a website that functions perfectly on Google Chrome, Safari, and IE. However, in Firefox, the animation skips a corner and goes straight to the end.

Chrome:

https://i.sstatic.net/FV3XP.png

Firefox:

https://i.sstatic.net/q8rGY.png

While the animation works smoothly on Chrome, it has a glitch on Firefox where it skips the top right corner of the middle rectangle.

SVG:

 // SVG code here

CSS (SASS):

 // CSS/SASS code here

I'm puzzled as to why this discrepancy occurs; I've thoroughly checked my code and can't seem to find any errors. Nonetheless, the issue persists specifically on Firefox, causing the animation to behave unexpectedly.

htmlcssfirefoxsvg

Answer №1

The middle polygon is experiencing an issue with its point attribute due to the absence of white space between the last two coordinate pairs. Consequently, the last coordinate pair is not being used as intended.

To resolve this problem...

<polygon class="st0" points="-218.1,149.2 -218.1,261.1 -225.1,261.1 -225.1,376.1 -161.4,376.1 -161.4,261.1 -155.2,261.1-155.2,149.2"/>

change it to...

<polygon class="st0" points="-218.1,149.2 -218.1,261.1 -225.1,261.1 -225.1,376.1 -161.4,376.1 -161.4,261.1 -155.2,261.1 -155.2,149.2"/>

According to the standards (https://www.w3.org/TR/SVG/shapes.html#PolygonElement), there should be a comma or white space between each coordinate pair. It appears that Internet Explorer and Chrome may overlook this requirement when dealing with negative values in the first coordinate of a pair.

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

Error encountered when transferring variable from jQuery to PHP due to index being undefined

Referenced from this query: Passing Jquery variable to php within a modal The setup is in place and should be functioning, but an undefined index error is occurring. Within a loop: print '<li>'; print '<a class="btn btn-d ...

phpjqueryhtmlajaxtwitter-bootstrap

The hover effects cease before the cursor is even shifted

Can someone explain why the hover effect stops before the mouse is moved off the element? I implemented the hover effect on a before pseudo element. ...

htmlcsshover

What is the best way to create a footer in this scenario and is there a method to perfectly center an

What is the best way to position the footer at the bottom of the page without overlapping the top content? Is there a method to center both the height and width of the header element on the page? Can you review the layout of this webpage and provide feed ...

htmlcsslayoutfrontendfooter

Is there a way to make the image above change when I hover over the thumbnail?

Seeking assistance with JavaScript to enable changing thumbnails on hover. As a newcomer to JavaScript, I'm struggling to grasp how to achieve this effect. I've already implemented fancybox for gallery functionality. Below is the HTML and CSS f ...

javascriptjqueryhtmlcssfancybox

Are there any PHP functions available that can check if the query string is empty?

I have experience with server-side development but not much in PHP. Currently, I'm working on a semi-basic tool with 10-15 pages and using the $_GET parameter for navigation. Is there a PHP function that can check if the query string is empty to dete ...

phphtml

Loading screen preceding page change

I've been searching everywhere and can't find a good tutorial on how to smoothly transition pages when clicking a link on my website. I want the page to fade out on click, display a preloader, then fade in the new page once the preloader finishes ...

javascriptjqueryhtmlcss

Guide on how to display an HTML file in Vue JS that is received from the server

I'm brand new to Vue JS and currently grappling with how to display an HTML page sent by the server. For example, let's say I have a Node router named "health" that sends an HTML file like this: res.sendFile('test.html', { root: path.d ...

javascripthtmlvue.jsvuejs2fetch

Having trouble with loading background images in the style tag of Vue.js. Can anyone offer a solution?

I have exhausted all options in my Vue app, but I am still unable to load the background image in my app.vue file. Despite getting the .html file to work with it, the image just won't show up. I've scoured the internet for solutions without succe ...

javascripthtmlcssvue.jsvuejs3

Sharing information linked to dynamically generated HTML elements in MVC5

Currently, I am working on developing an MVC5 application. Within a view, I am dynamically creating HTML elements such as textboxes and dropdown lists using a JSON result returned from the server and jQuery. Now, my goal is to submit the selected data IDs ...

jqueryhtmlasp.net-mvc-5

Responsive design with Semantic UI

Can you please provide an example of how to design for different screen sizes using Semantic UI instead of Bootstrap? I'm looking for something similar to Bootstrap's sm and lg classes. For instance, would it look like this: <div class="col s ...

cssresponsivesemantic-ui-react

Executing a code inside a jQuery modal element

I am utilizing a jquery plugin called jQuery Image Scale to automatically resize individual images on my website. Below is a simple example: // HTML: <div class='parent_container'> <img src='image.jpg' class=&apos ...

jqueryhtmlcss

How do I fix the issue with my text being truncated?

While working on my website, I encountered an issue where the text is being cut off at the bottom of the page. I could adjust the margins and resize images and text to fit within the page, but I would prefer to allow scrolling on the webpage. Can anyone pr ...

htmlcss

Is there a way to determine if a radio button or checkbox has been selected?

In my HTML code, I have the following: <div id="f4" class="none"> <h4>Which tariff do you want to select?</h4> <input type="radio" name="tarif" value="tarif1" id="t1"><label for="t1">Tariff 1</label> <br&g ...

javascripthtmlforms

Include a hyperlink to a website that was created with the help of Photoshop

Is it feasible to incorporate a hyperlink into a website that was designed using Photoshop templates? In the past, creating templates in Photoshop and then adding links with tools like Dreamweaver was common practice. I believed that dynamically adding li ...

phphtmlweb-deployment

effects of material ui buttons

I have implemented two material ui buttons on my page. <Button variant="contained">Apply</Button> <Button variant="contained">Remove</Button> I am looking to add some functionality where a description of what ea ...

cssreactjstypescriptmaterial-ui

ag-grid: Enable row dragging by allowing users to drag the entire row

Currently, I am utilizing the Vue version of ag-grid 21.2.1 (https://www.ag-grid.com/vue-getting-started/) and successfully integrated Row Dragging (https://www.ag-grid.com/javascript-grid-row-dragging/) feature on one of our tables. Everything is function ...

javascriptcssvue.jsag-grid

Looking to find a specific file by searching for the first part of its name within a shared path, then continuing the search in the Desktop, C, and D drives using .Bat files

Guide to Following a Specific Procedure 1. Begin by searching for a file in a shared path (example: auto). If the file is found, retrieve the full name of the file (example: Auto restart.xlsm). 3. Next, check for the file on Desktop, C, and D drives. ...

htmlbatch-file

The JS Fiddle code fails to function properly once it has been downloaded to the local computer

I came across a helpful example fiddle webpage: jsfiddle.net/yijiang/6FLsM/2 After following examples from others, I attempted to download (right click and Save As) using the latest Chrome browser with the following links: jsfiddle.net/yijiang/6FLsM/2/s ...

javascripthtmllocaljsfiddle

Avoiding interference with adjacent elements caused by long content in a div

Hey there, I could really use some help with my CSS layout, I'm pretty new to CSS and Flexbox and I'm trying to create a simple layout. The issue I'm running into is how to stop long content inside a pre tag from pushing other divs. Here& ...

htmlcssflexbox

Enhance user experience by implementing an autocomplete feature for a text input field

Can you name the process in which a form is automatically filled using database information without needing to refresh the page? One common example of this technique is seen on platforms like Google or Facebook, where they predict friends you may be searc ...

javascriptjqueryajaxdatabasehtml