Chrome version (146.0.x) breaks on SVG Automatic generation for Drag and Drop xblock

[Javier_Ochoa]

Hi, we found an issue on our instance (Redwood version) a few days ago. Around March 18th, our Chrome browser was updated to v146.0.x, and the “drag and drop” XBlock suddenly stopped working. Specifically, the button with the option to “Generate images and zones” generates an SVG that Chrome v146.0.x is unable to render, which causes it to break.

One of our team members still had version 145.0.x and was not experiencing the problem. Once they updated Chrome, the error became visible. We also tested it on Firefox, where the problem does not occur, so as far as we know this is Chrome-specific.

We may just need to wait for a patch from their end, but we wanted to post here in case there is something that can be addressed from the application side.

img src attribute contains the following:

src="data:image/svg+xml;producer=%22dndv2%22;cols=3;rows=1;zone_width=200;zone_height=200,%3Csvg%20xmlns%3D%22http%3A%2F%``2Fwww.w3.org``%2F2000%2Fsvg%22%20width%3D%22680%22%20height%3D%22240%22%3E%0A%20%20%20%20%20%20%20%20%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23fff%22%20%3E%3C%2Frect%3E%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20x%3D%2220%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20y%3D%2220%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width%3D%22200%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height%3D%22200%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fill%3D%22%23f7f7f7%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20rx%3D%2210%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20ry%3D%2210%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke%3D%22%23d6d6d6%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke-width%3D%222%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke-dasharray%3D%223%2C3%22%20%3E%3C%2Frect%3E%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20x%3D%22240%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20y%3D%2220%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width%3D%22200%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height%3D%22200%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fill%3D%22%23f7f7f7%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20rx%3D%2210%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20ry%3D%2210%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke%3D%22%23d6d6d6%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke-width%3D%222%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke-dasharray%3D%223%2C3%22%20%3E%3C%2Frect%3E%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20x%3D%22460%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20y%3D%2220%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width%3D%22200%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height%3D%22200%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fill%3D%22%23f7f7f7%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20rx%3D%2210%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20ry%3D%2210%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke%3D%22%23d6d6d6%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke-width%3D%222%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke-dasharray%3D%223%2C3%22%20%3E%3C%2Frect%3E%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%3C%2Fsvg%3E"

Firefox shows it right:

More details:

• Issue has been reported in Chrome and Edge browsers (Firefox works fine)

• Chrome version 145.0 was working fine, but then it started failing in version 146.0

• The problem happens in this place:
  https://github.com/openedx/xblock-drag-and-drop-v2/blob/master/drag_and_drop_v2/public/js/drag_and_…
  This promise is being rejected due to the SVG file failing to load

• Chrome v146.0 is failing to parse the SVG

[sarina (Sarina Canelake)]

Hi @Javier_Ochoa and welcome to the forum!

I’m have a bit of a hard time following your post. Would you mind editing it to clearly state your problem, and provide all errors in text/code blocks instead of images (images aren’t searchable). Thank you!

[Javier_Ochoa]

Hi @sarina sorry for it, I am new in this domain and its my first post. The images are to make it easier for users to find the button in the “drag and drop“ xblock configuration in order to see the problem.

I have added context to the problem now. Let me know if that is better

[sarina (Sarina Canelake)]

Thanks for the additional information, @Javier_Ochoa , including your platform version - this is helpful. I just triage the forums so I won’t be of further help here but tagging @Agrendalath as the maintainer of this package.

[kmccormick (Kyle McCormick)]

Hey @Javier_Ochoa ! Are you seeing any information in chrome’s console log?

[Javier_Ochoa]

Nothing relevant, no @kmccormick

[Agrendalath (Piotr Surowiec (OpenCraft) - opencraft.com/help)]

Thanks for reporting this, @Javier_Ochoa. It is caused by the Data URL MIME Type Parameter Preservation, so this seems to be a feature, not a bug (i.e., I would not expect a browser patch for this). I have a WIP solution for the Studio editor, but there is one more issue here: the generated SVGs in this XBlock are also broken in the LMS. I will write a backend function to translate SVG URIs to the new format today/tomorrow.
I can also backport this to Redwood - we have recently dropped Python 3.11 support, so you will not be able to install the newest version in older releases.

[Agrendalath (Piotr Surowiec (OpenCraft) - opencraft.com/help)]

@sarina, @kmccormick, I opened the PR with the fix. Would somebody from Axim like to review it? We don’t have other Core Committers for this repo.

@Javier_Ochoa, if you’d like to use this with Redwood, I created this temporary branch with the fix: GitHub - open-craft/xblock-drag-and-drop-v2 at agrendalath/fix-autogenerated-zones-redwood · GitHub

[kmccormick (Kyle McCormick)]

This should be fixed in the latest version of the drag-and-drop-v2 block: Release v5.0.5 · openedx/xblock-drag-and-drop-v2 · GitHub

Thanks for the report @Javier_Ochoa and thanks for the fix @Agrendalath !

[Javier_Ochoa]

Hello @Agrendalath do you know how to apply this patch in the instance config, how to do it for an internal xblock?

[Agrendalath (Piotr Surowiec (OpenCraft) - opencraft.com/help)]

@Javier_Ochoa, if you are using Tutor, you can use the OPENEDX_EXTRA_PIP_REQUIREMENTS configuration. For Redwood, it should look like this:

OPENEDX_EXTRA_PIP_REQUIREMENTS:
  - git+https://github.com/open-craft/xblock-drag-and-drop-v2@agrendalath/fix-autogenerated-zones-redwood

For Ulmo, you can use this:

OPENEDX_EXTRA_PIP_REQUIREMENTS:
  - xblock-drag-and-drop-v2==5.0.5

[Javier_Ochoa]

Great! It worked. Thanks a lot.