Issue #3620662: Encode the space in the dynamic responsive image placeholder

Rajab Natshahrequested to merge
issue/vartheme_bs5_horizonaid-3620662:3620662-encode-the-space into 1.0.x

Issue: https://www.drupal.org/project/vartheme_bs5_horizonaid/issues/3620662

What this changes

One character, in components/molecules/dynamic-responsive-image/dynamic-responsive-image.twig:39:

-"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%20width='"
+"data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='"

Every space in that SVG was already %20 except the one between %3Csvg and xmlns.

Why

In a srcset, whitespace separates the URL from its descriptor. The browser read the URL as data:image/svg+xml;charset=utf8,%3Csvg, treated xmlns='http://www.w3.org/2000/svg'%20width='1400'… as a descriptor, could not parse it, and dropped the candidate:

Failed parsing 'srcset' attribute value since it has an unknown descriptor.
Dropped srcset candidate "data:image/svg+xml;charset=utf8,%3Csvg"

So the low-quality placeholder never applied, losing the component's no-layout-shift behaviour, and each affected image logged two console warnings.

Verified, not assumed

Applied to a fresh Horizon Aid install on a Drupal CMS base and measured before and after on the front page:

Broken srcset candidates Console messages
Before 18 36 warnings
After 0 0 errors, 0 warnings

Scope

This fixes only this theme. The same string with the same single un-encoded space also exists in vartheme_bs5 and the other Vartheme BS5 clones, and in drupal/drimage_improved 1.0.12 (templates/drimage-formatter.html.twig and modules/drimage_s3fs/templates/drimage-s3-formatter.html.twig), which is presumably the origin. Those need their own issues.

Checkpoints

  • File an issue
  • Addition/Change/Update/Fix
  • Testing to ensure no regression
  • Automated unit/functional testing coverage
  • Developer Documentation support
  • User Guide Documentation support
  • UX/UI designer responsibilities
  • Accessibility and Readability
  • Reviewed by a human
  • Code review by maintainers
  • Full testing and approval
  • Credit contributors
  • Review with the product owner
  • Update Release Notes
  • Release

AI-Generated: Yes

Edited by Rajab Natshah

Merge request reports