All Questions
785
questions
2
votes
1
answer
76
views
svg mask is broken with <use>
I created a simple Snippet to demonstrate a different behavior between Chrome/Safari and Firefox.
<svg style="display:none" xmlns="http://www.w3.org/2000/svg">
<symbol id="foo">
...
- 663
1
vote
1
answer
28
views
Clip Path height/objectBoundingBox not working Firefox
I have an effect on my site which uses a clip-path in the form of a wave like so:
<svg class="svg" width="0" height="0" preserveAspectRatio="xMidYMid meet"&...
- 246
1
vote
0
answers
108
views
How do I set inline-size in an svg that contains text?
The SVG 2.0 specification states that the inline-size attribute can be used in text elements in order to have automatic text wrapping, here is an example code block of such an svg (taken from the ...
0
votes
0
answers
39
views
Firefox dispatchEvent doesn't propagate to children
I have an <svg> with a <g> with children, that have pointerdown event handlers, and a <use> referencing the <g>.
In Chrome if I register the event handler before I add the <...
- 11
0
votes
1
answer
62
views
svg cannot be displayed on Firefox
I have an svg image written using xml code. This code can be opened normally in edge and chrome browsers and displays the content drawn by the svg. However, when I open it with firefox, the page is ...
- 1
0
votes
0
answers
149
views
Complex SVG is pixelated in Chrome but renders correctly in Firefox
I am working on a project in Next JS that uses some complex SVGs as background elements. Here is a sample of what the background looks like in Chrome vs Firefox:
Chrome:
Firefox:
I have seen this ...
- 111
0
votes
0
answers
94
views
SVG animation works in Chrome & Safari, but not in Firefox
I have a Logo as SVG paths, which I animated to be triggered by scrolling.
On Chrome & Safari it works like a charm (desktop & mobile), but not in Firefox.
This is the SVG (some letters ...
- 1,555
0
votes
1
answer
383
views
svg element with stroke-width renders differently in firefox and chrome
There is a difference in rendering svg elements with stroke-width in firefox and chrome.
<html>
<body>
<svg width="400" height="110">
<rect width="400&...
- 70
1
vote
1
answer
246
views
Firefox doesn't set width correctly for SVG's parent div
I have an SVG without fixed width and height, it has only viewbox defined. I have one flex container which contains some child divs and inside those childs are the SVG's. With Chrome this works fine ...
- 100
2
votes
1
answer
129
views
Height of SVG#tspan using getBBox() returns wrong value in Firefox
When applying getBBox() to the child of tspan#t18yiifj the returned height is ~18 in Firefox (wrong) and ~450 in Chrome/Edge (correct).
SVG-excerpt
<g id="dynam_10206" class="...
0
votes
2
answers
80
views
Portions of inline SVG not rendering in Firefox until selected or re-scrolled
I have some inline SVG elements exported from PlantUML on a web page. They display properly in Chrome, Edge, and Safari on iOS, but in Firefox parts of them will sometimes not render until I either ...
- 852
1
vote
1
answer
278
views
SVG filter looks very different in Chrome vs Firefox
I have created an example here:
<svg viewBox="0 0 800 200">
<defs>
<filter id="cloth">
<feTurbulence seed="399" type="fractalNoise" baseFrequency="10.797" id="...
- 687
0
votes
0
answers
25
views
Why does SVG load in Chrome and Safari but not Firefox? [duplicate]
I have the following code:
const svg = new Image();
svg.src = "https://svgur.com/i/soR.svg";
const ctx = document.querySelector("canvas").getContext("2d");
function drawImage() {
ctx.drawImage(...
- 11.7k
0
votes
0
answers
39
views
Vanilla JS resizing animation works in every browser but Firefox
I have a div wrapped around an inline SVG in my HTML that has a movement and resizing animation in JS triggered by the user scrolling down, like so:
HTML:
<div id="pepper-logo" onclick=&...
- 37