rpcs3.net - Missing SVG animation #53814

IngrownMink4 · 2020-06-06T19:05:44Z

Browser / Version: Firefox 79.0
Operating System: Windows 10
Tested Another Browser: Yes Chrome

Problem type: Something else
Description: The animation does not work in Firefox
Steps to Reproduce:
There is an animation in SVG format on this page that works in Chrome but not in Firefox. In Chrome, you can see some faint curves moving. In Firefox, you can see the line, but it doesn't move at all...

View the screenshot

Browser Configuration

gfx.webrender.all: true
gfx.webrender.blob-images: true
gfx.webrender.enabled: true
image.mem.shared: true
buildID: 20200606094603
channel: nightly
GPUs:
- active: true
- description: NVIDIA GeForce GTX 1050 Ti
- deviceID: 0x1c82
- vendorID: 0x10de
- driverVersion: 26.21.14.4614
hasTouchScreen: false
mixed active content blocked: false
mixed passive content blocked: false
tracking content blocked: false

View console log messages

From webcompat.com with ❤️

softvision-oana-arbuzov · 2020-06-10T07:42:15Z

Thanks for the report, I was able to reproduce the issue.

Affected area:

<svg class="discord-con-animate" preserveAspectRatio="none" width="1920" height="100%" viewBox="0 0 1920 330">
	<path class="discord-svg-animate" fill="#fff" fill-opacity="0.1" d="M140.881198,194.260295 C257.600568,129.32862 342.939626,119.84993 418.009939,203.154617 C493.080251,286.459305 545.728689,70.9046172 636.439626,63.9593047 C727.150564,57.0139922 768.99822,139.670242 858.802907,119.431961 C948.607595,99.1936797 1071.91228,-32.9977266 1243.91228,7.75227342 C1415.91228,48.5022734 1404.10369,208.584305 1508.27166,178.709305 C1612.43963,148.834305 1633.73291,79.913472 1711.63588,98.8569055 C1776.28676,114.577866 1819.96778,221.391836 1889.37253,185.808108 C2017.32661,120.206212 2004.01952,336.769569 2004.01952,336.769569 L271.635881,337 L-149.063338,337 C-149.063338,337 -245.850307,175.637635 -58.0633382,228.867188 C33.8652851,254.92501 64.1722713,236.933925 140.881198,194.260295 Z"></path>
</svg>

Tested with:
Browser / Version: Firefox Nightly 79.0a1 (2020-06-09)
Operating System: Windows 10 Pro

Moving to Needsdiagnosis for further investigation.

karlcow · 2020-06-11T04:12:02Z

hmm what is happening here.

<svg class="discord-con-animate" preserveAspectRatio="none" width="1920" height="100%" viewBox="0 0 1920 330">
<path class="discord-svg-animate" fill="#fff" fill-opacity="0.1" d="M140.881198,194.260295 C257.600568,129.32862 342.939626,119.84993 418.009939,203.154617 C493.080251,286.459305 545.728689,70.9046172 636.439626,63.9593047 C727.150564,57.0139922 768.99822,139.670242 858.802907,119.431961 C948.607595,99.1936797 1071.91228,-32.9977266 1243.91228,7.75227342 C1415.91228,48.5022734 1404.10369,208.584305 1508.27166,178.709305 C1612.43963,148.834305 1633.73291,79.913472 1711.63588,98.8569055 C1776.28676,114.577866 1819.96778,221.391836 1889.37253,185.808108 C2017.32661,120.206212 2004.01952,336.769569 2004.01952,336.769569 L271.635881,337 L-149.063338,337 C-149.063338,337 -245.850307,175.637635 -58.0633382,228.867188 C33.8652851,254.92501 64.1722713,236.933925 140.881198,194.260295 Z"></path>
</svg>

then the css is

.discord-svg-animate {
	-webkit-animation: blobby 30s linear infinite alternate;
	animation: blobby 30s linear infinite alternate;
}

@-webkit-keyframes blobby {
 0% {
  d:path("M140.881198,194.260295 C257.600568,129.32862 342.939626,119.84993 418.009939,203.154617 C493.080251,286.459305 545.728689,70.9046172 636.439626,63.9593047 C727.150564,57.0139922 768.99822,139.670242 858.802907,119.431961 C948.607595,99.1936797 1071.91228,-32.9977266 1243.91228,7.75227342 C1415.91228,48.5022734 1404.10369,208.584305 1508.27166,178.709305 C1612.43963,148.834305 1633.73291,79.913472 1711.63588,98.8569055 C1776.28676,114.577866 1819.96778,221.391836 1889.37253,185.808108 C2017.32661,120.206212 2004.01952,336.769569 2004.01952,336.769569 L271.635881,337 L-149.063338,337 C-149.063338,337 -245.850307,175.637635 -58.0633382,228.867188 C33.8652851,254.92501 64.1722713,236.933925 140.881198,194.260295 Z")
 }
 50% {
  d:path("M-60.13579,199.189799 C-33.8674767,-71.7287911 170.194454,11.9640675 274.985105,83.0972992 C379.775756,154.230531 409.072181,161.653171 521.54913,124.460269 C634.026079,87.2673683 645.348165,219.42808 735.152853,199.189799 C824.95754,178.951518 948.262228,46.7601116 1120.26223,87.5101116 C1292.26223,128.260112 1309.89513,321.347957 1414.0631,291.472957 C1518.23106,261.597957 1580.53259,89.5639434 1732.07052,88.5665294 C1892.57296,87.5101116 1897.70372,225.708266 2049.59054,199.189799 C2201.47736,172.671332 2002.94707,336.794682 2002.94707,336.794682 L270.563429,337.025114 L-60.13579,337.025114 C-60.13579,337.025114 -469.886827,134.917309 -282.099858,188.146862 C-190.171235,214.204685 -65.9645849,259.30515 -60.13579,199.189799 Z")
 }
 to {
  d:path("M-160.553381,263.533987 C-124.4955,243.377988 -18.6139605,181.080724 56.456352,264.385412 C131.526664,347.690099 165.148428,226.409513 223.668826,168.5 C282.189224,110.590487 372.68516,208.331261 462.489847,188.09298 C552.294535,167.854699 723.262827,-40.1656225 847.424394,40.7522734 C971.58596,121.670169 1156.59375,252.295176 1300.40314,228.958726 C1444.21253,205.622277 1478.90991,106.221579 1563.51957,124.699258 C1655.80276,144.85274 1595.69955,250.007434 1832.41793,206.740235 C2069.1363,163.473036 2002.94707,336.794682 2002.94707,336.794682 L270.563429,337.025114 L-60.13579,337.025114 C-60.13579,337.025114 -495.794798,256.512987 -308.007829,309.74254 C-216.079206,335.800362 -208.740043,290.469854 -160.553381,263.533987 Z")
 }
}
@keyframes blobby {
 0% {
  d:path("M140.881198,194.260295 C257.600568,129.32862 342.939626,119.84993 418.009939,203.154617 C493.080251,286.459305 545.728689,70.9046172 636.439626,63.9593047 C727.150564,57.0139922 768.99822,139.670242 858.802907,119.431961 C948.607595,99.1936797 1071.91228,-32.9977266 1243.91228,7.75227342 C1415.91228,48.5022734 1404.10369,208.584305 1508.27166,178.709305 C1612.43963,148.834305 1633.73291,79.913472 1711.63588,98.8569055 C1776.28676,114.577866 1819.96778,221.391836 1889.37253,185.808108 C2017.32661,120.206212 2004.01952,336.769569 2004.01952,336.769569 L271.635881,337 L-149.063338,337 C-149.063338,337 -245.850307,175.637635 -58.0633382,228.867188 C33.8652851,254.92501 64.1722713,236.933925 140.881198,194.260295 Z")
 }
 50% {
  d:path("M-60.13579,199.189799 C-33.8674767,-71.7287911 170.194454,11.9640675 274.985105,83.0972992 C379.775756,154.230531 409.072181,161.653171 521.54913,124.460269 C634.026079,87.2673683 645.348165,219.42808 735.152853,199.189799 C824.95754,178.951518 948.262228,46.7601116 1120.26223,87.5101116 C1292.26223,128.260112 1309.89513,321.347957 1414.0631,291.472957 C1518.23106,261.597957 1580.53259,89.5639434 1732.07052,88.5665294 C1892.57296,87.5101116 1897.70372,225.708266 2049.59054,199.189799 C2201.47736,172.671332 2002.94707,336.794682 2002.94707,336.794682 L270.563429,337.025114 L-60.13579,337.025114 C-60.13579,337.025114 -469.886827,134.917309 -282.099858,188.146862 C-190.171235,214.204685 -65.9645849,259.30515 -60.13579,199.189799 Z")
 }
 to {
  d:path("M-160.553381,263.533987 C-124.4955,243.377988 -18.6139605,181.080724 56.456352,264.385412 C131.526664,347.690099 165.148428,226.409513 223.668826,168.5 C282.189224,110.590487 372.68516,208.331261 462.489847,188.09298 C552.294535,167.854699 723.262827,-40.1656225 847.424394,40.7522734 C971.58596,121.670169 1156.59375,252.295176 1300.40314,228.958726 C1444.21253,205.622277 1478.90991,106.221579 1563.51957,124.699258 C1655.80276,144.85274 1595.69955,250.007434 1832.41793,206.740235 C2069.1363,163.473036 2002.94707,336.794682 2002.94707,336.794682 L270.563429,337.025114 L-60.13579,337.025114 C-60.13579,337.025114 -495.794798,256.512987 -308.007829,309.74254 C-216.079206,335.800362 -208.740043,290.469854 -160.553381,263.533987 Z")
 }
}

oh invalid property name d:path() is not implemented in Firefox or Safari. This is only working in Blink browsers.

see https://svgwg.org/svg2-draft/paths.html#TheDProperty for the spec
there's a discussion about it
w3c/svgwg#320

ok found it.

karlcow · 2020-06-11T04:12:18Z

Close as duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=1571119

webcompat-bot added this to the needstriage milestone Jun 6, 2020

webcompat-bot added browser-firefox engine-gecko The browser uses the Gecko rendering engine type-webrender-enabled Firefox webrender engine pref labels Jun 6, 2020

softvision-oana-arbuzov added severity-important A non-core broken piece of functionality, not behaving the way you would expect. priority-normal labels Jun 10, 2020

softvision-oana-arbuzov modified the milestones: needstriage, needsdiagnosis Jun 10, 2020

softvision-oana-arbuzov changed the title ~~rpcs3.net - see bug description~~ rpcs3.net - Missing SVG animation Jun 10, 2020

webcompat-bot modified the milestones: needsdiagnosis, duplicate Jun 11, 2020

webcompat-bot closed this as completed Jun 11, 2020

anup-a mentioned this issue Nov 21, 2021

Animation doesn't seem to work in Firefox (latest version) Browser anup-a/svgwave#57

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

rpcs3.net - Missing SVG animation #53814

rpcs3.net - Missing SVG animation #53814

IngrownMink4 commented Jun 6, 2020

softvision-oana-arbuzov commented Jun 10, 2020

karlcow commented Jun 11, 2020

karlcow commented Jun 11, 2020

rpcs3.net - Missing SVG animation #53814

rpcs3.net - Missing SVG animation #53814

Comments

IngrownMink4 commented Jun 6, 2020

softvision-oana-arbuzov commented Jun 10, 2020

karlcow commented Jun 11, 2020

karlcow commented Jun 11, 2020