Why doesn't my dataURI work in certain browsers?

[junkbox]

I’m using the victor, chroma, and simplex-noise libraries to create noise and animations on an image. The image is being loaded as a Base64 dataURI and all functions as intended in Chrome, however in Firefox and other browsers console throws an exception:

‘Uncaught TypeError: image.path is undefined’

I’m learning here and was disappointed to find this doesn’t render properly in Firefox as I had been using only Chrome for testing. I do know that this method worked at one point in time across all browsers but looking back at some old experiments they no longer function anymore either.

here is a link to the pen I’m using for experimentation:

Polygonic Max

I’m probably missing something obvious I should have noticed a while back and assume it is due to some security update to webkit browsers or something…i dunno I’m learning here.

[lasjorg]

Not sure why the load object is so different. In Firefox you can use target or one of the other properties.

Properties in Firefox that contain the element (these all seem to be null in Chrome):

explicitOriginalTarget: <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEBLAEsAAD…">
​
originalTarget: <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEBLAEsAAD…">
​
srcElement: <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEBLAEsAAD…">
​
target: <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEBLAEsAAD…">

I renamed the param to event.

preloadImg(datauri) {
  const img = new Image();
  
  return new Promise((resolve) => {
    img.onload = (event) => {
      const imgElement = event.path ? event.path[0] : event.target;
      resolve(imgElement);
    };
  
    img.src = datauri;
  });
}

[junkbox]

ahhh, OK. So that does render in FF now. Guess that makes sense. Great thank you.

I notice the load time is wicked slow in FF…literally over a minute on this machine. It does load though. Any clue why the lag? It does fine in android chrome and iphone though so I’m thinking it’s just my machine. Would you mind confirming?

updated pen:

Polygonic Max - event_target

[lasjorg]

It runs really slow in Firefox for me as well.

I tested a few things with the code a nothing really changed. Then I looked at the process and threads and it looked like it was getting stuck on something related to the GPU. So I tested it with hardware acceleration (Use hardware acceleration when available) turned off and it loads just fine. Not really sure what is happening but for me at least it seems related to the GPU acceleration. Can’t say if one of the libs is involved or if it’s just the plain requestAnimationFrame code that is causing it.

[junkbox]

Excellent, thanks for the lead I’ll post back with solution or advancements.

I appreciate your time.

[lasjorg]

No problem.

If you figure it out do let me know. I’m curious why Firefox is choking on this with hardware acceleration turned on.

BTW, what GPU do you have in your system, Nvidia or AMD?

[junkbox]

nothin special, GTX 760 it’s just for development, an old card that was floating around to build another box with.

I didn’t think about it being chipset specific…hmmm…more variables.

[lasjorg]

I have an Nvidia card as well. If someone with an AMD card (or Intel integrated GPU) can confirm the same issue it would at least (maybe) rule out a hardware-related bug.

[jeremy.a.gray]

Dell Latitude 7480 with integrated Intel video. Eyeball test says firefox is slightly faster on load and on UI response than chrome. Both are up to date on debian bullseye. Both load in ~1 s.

FWIW, when I saw data: URI, my gut said CSP problem since I had an issue with this recently in an unrelated context. I discounted it when firefox and chrome both loaded the animation without problems.

[lasjorg]

@jeremy.a.gray Interesting, thank you for testing. Can you double-check the hardware acceleration?

• In Firefox put in about:support in the address bar and hit enter.

• Look at the “Graphics” → “Features” → “Compositing”, should say “WebRender” and not “WebRender (Software)”.

• Look at the “Graphics” → “Decision Log” section. I think something like the top 6 items should say enabled (or available by default).

---

If someone with an AMD card can also test this that would be great.

[jeremy.a.gray]

I had just checked about:preferences and it’s set to “Use recommended performance settings” which I assumed turned on acceleration, but about:support has compositing set to basic and all the decision log entries have “available by default” and “denied/blocked/unavailable by env” so maybe not. chrome’s hardware acceleration box was checked (I assume by default).

I don’t use the graphics for more than xplanet, emacs, and basic browsing so I haven’t really messed with it. I can get further information if it would be useful though.

[lasjorg]

I think if you have available by default in the list it should be working. I guess another option might be to use some tool to check the GPU usage when running the page.