Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Missing-srcset enhancement rewrites data-*-srcset attributes and breaks Envira lazy-load placeholders

Abierto
  • ¿Algo no está bien?
#1,184 3 comentarios 0 reacciones 1 asignado Ver en GitHub

Los mantenedores suelen responder en 1 día

@selul ya está trabajando en esto.

Desde el 16/10/2026.

  • #1169 de @pirate-bot — abierto

Evaluación

Este issue todavía no se ha evaluado.

Descripción

3rd-part-compatibilities bug-report

Status (2026-10-16)

Fixed in PR #1185 (bugfix/1184 → development). Pirate-bot approved f38d4978, and all checks are green.

  • The srcset/sizes enhancement now reads the image tag attribute by attribute, the way a browser does. It only reads and writes the image's own quoted src / srcset / sizes, at their exact positions; data-*-srcset, data-src, data-sizes and text inside other values are never touched.
  • An image whose first src or srcset is a data: placeholder (quoted, unquoted, spaced or uppercase) is left to its lazy loader, including its sizes. This covers the QA agent's finding.
  • Verified on testing.optimole.com/envira-test-page/: gallery 92 image 4 keeps Envira's placeholder srcset, with no duplicate sizes. The Firefox Envira E2E test passes on the PR.
  • A differential run against development (124 cases through the full replacer) changed no CDN URL replacement. Only srcset/sizes differ, in 2 cases.
  • Not enhanced any more (they keep their CDN src): malformed markup such as alt=can't, and partly JSON-escaped markup (src="https:\/\/…").
  • Not changed: when an image's own srcset uses x descriptors, adding w entries still mixes them; repeated sizes breakpoints remain the #1111 / #1113 area.
  • The second QA run found that an image with a data: placeholder in data-src before its real src gets no profiler srcset, on development too. The image parser takes the placeholder as the image URL; filed separately as #1186.
  • development (and the release PR #1169) keep failing this E2E test until #1185 is merged.

Summary

When the page profiler has missing-srcset data for an image, Optml_Tag_Replacer::add_missing_srcset_attributes() rewrites the wrong attributes. Its srcset= / sizes= / src= regexes are not anchored to an attribute name, so they also match data-*-srcset, data-*-sizes and data-*-src attributes that lazy-load and gallery plugins use.

On Envira Gallery images this:

  1. reads the existing value from data-envira-srcset (the first match) instead of srcset;
  2. writes the merged value into every match, so Envira's placeholder srcset="data:image/gif;base64,…" is replaced with real CDN candidates;
  3. inserts sizes after both the real and the data-envira-srcset attribute, so the tag ends up with two sizes attributes;
  4. mixes x and w descriptors in one srcset (… 2x, … 254w, … 400w), which is invalid.

Because the placeholder srcset is gone, the browser downloads the image immediately instead of leaving it to Envira's lazy loader. In Firefox that load finishes before Envira's justifiedGallery init, and the init then resets src to data-safe-src (the GIF placeholder). The image still shows (from srcset), but the markup no longer matches what the gallery script expects, and lazy loading is defeated for that image.

Steps to reproduce

  1. Envira Gallery Lite gallery on a page, Optimole connected, lazy load in viewport mode.
  2. Visit the page so optimizer.js stores a missing-srcset measurement for one gallery image (the profile in Optml_Manager::instance()->page_profiler).
  3. Reload and look at that image's tag.

Live example: http://testing.optimole.com/envira-test-page/, gallery 92, attachment 18 (#envira-gallery-wrap-92 #envira-gallery-image-18).

Expected: srcset keeps Envira's data: placeholder, data-envira-srcset is not touched, one sizes attribute.

Actual:

<img … class="envira-gallery-image envira-gallery-image-4 envira-normal envira-lazy"
  src="https://….i.optimole.com/…/w:254/h:300/…/marina-mazur-…-scaled.jpg"
  data-envira-srcset="… 2x, … 254w, … 400w" sizes="(max-width: 2560px) 254px"
  srcset="… 2x, … 254w, … 400w" sizes="(max-width: 2560px) 254px"
  data-safe-src="data:image/gif;base64,…" />

The other images in the same gallery (no profiler data) keep srcset="data:image/gif;base64,…".

Impact

  • The E2E check tests/e2e/envira.spec.ts › Gallery images all attributes replaced properly has failed on Firefox on 7 of the last 8 development runs since 2026-10-12, including the release PR #1169. It started once the shared QA site's profile recorded missing-srcset data for attachment 18. Chromium passes only because its script timing is different.
  • Any plugin that keeps the real source in a data-*-srcset / data-*-src attribute (Envira, other galleries and lazy loaders) can get duplicated attributes or a placeholder srcset replaced with eager candidates.

Root cause

inc/tag_replacer.php:

  • add_missing_srcset_attributes(): strpos( $tag, 'srcset=' ) / strpos( $tag, 'sizes=' ) presence checks; srcset insert after /(src=["'][^"']*["'])/i; sizes insert after /(srcset=["'][^"']*["'])/i; existing-sizes lookup /sizes=…/.
  • enhance_existing_srcset() / enhance_existing_sizes(): preg_match on /srcset=…/ and /sizes=…/, then preg_replace with no limit.

The code was introduced in 4.1.0 (8ab74741).

Proposed fix

  • Match only the real src / srcset / sizes attributes (attribute name preceded by whitespace) and replace a single occurrence.
  • When the real srcset (or src) is a data: placeholder, another script owns loading the image: leave the tag unchanged instead of adding eager candidates.
  • PHPUnit cases for an Envira-style tag.
Lenguaje dominante
PHP
Estrellas
74
Forks
14
Merge medio
2 d 3 h
PR fusionados (30 d)
22

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de Codeinwp/optimole-wp

Todos los issues de Codeinwp/optimole-wp

Issues similares

Más issues de PHP

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.