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

Rajab Natshahrequested to merge
issue/vartheme_bs5-3620673:3620673-encode-the-space into 5.0.x

Issue: https://www.drupal.org/project/vartheme_bs5/issues/3620673

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, so the browser read the URL as data:image/svg+xml;charset=utf8,%3Csvg, treated the rest 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"

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

Verified, not assumed

Measured on a fresh install of a site template built on this component, before and after, on the front page:

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

Scope and notes

  • Present in 5.0.x, 4.1.x and 4.0.x. This MR targets 5.0.x; backports are a maintainer decision.
  • The clones need their own fix. Every Vartheme BS5 starter-kit clone carries its own copy of this component, so this does not fix them. Already done in vartheme_bs5_horizonaid (#3620662).
  • The CSS is not affected. The quoted url('data:image/svg+xml,…') values elsewhere in the theme are fine: inside a quoted CSS url() the whole string is the URL and a literal space is legal. Only srcset treats whitespace as a delimiter.
  • The same mistake exists upstream in drupal/drimage_improved 1.0.12, which is presumably where this string came from.

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