Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Generated sizes attribute can contain duplicate max-width conditions

Aperta
  • Qualcosa non va?
#1,113 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
52/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Tranquilla
Stack tecnologico
javascript, php, wordpress
Ambito
backend, frontend, web-dev

Direzione di ricerca

Inizia con _generateResponsiveSizes() e _selectBestVariations() in assets/js/modules/srcset-detector.js, quindi segui add_missing_srcset_attributes() e enhance_existing_sizes() in inc/tag_replacer.php. Esegui tests/test-srcset.php e la suite JavaScript di srcset-detector con Retina Quality e breakpoint condivisi. Il lavoro è completato quando le varianti di densità mantenute non producono più condizioni ripetute ambigue negli attributi sizes generati.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

bug-report bug-report-triage customer report

Summary

With Retina Quality enabled, Optimole can emit multiple sizes clauses using the same max-width condition but different slot widths. Each breakpoint is expected to have an unambiguous effective slot declaration. Because only the first matching condition participates in browser selection, later duplicates are unreachable and can leave the browser using an unintended slot width.

Customer context

Product / area: Optimole page profiler and generated sizes attributes
Version: Customer version not provided; inspected source is v4.2.10
Environment: Responsive WordPress frontend with Retina Quality enabled
Integration / third party: Browser responsive-image selection
Reported error / symptom: Duplicate conditions such as two max-width: 768px entries
Impact: Conflicting responsive-image metadata can cause unintended candidate selection and oversized downloads.

Reproduction notes

Confirmed by direct code inspection and by support's inspection of the reported output; no local browser reproduction was performed.

  1. Enable Retina Quality for an image eligible for page-profiler-generated responsive candidates.
  2. Allow both 1x and 2x candidates for one breakpoint to survive candidate selection and filtering.
  3. Inspect the generated sizes attribute on a later rendered response.
  4. Observe repeated conditions such as (max-width: 768px) paired with different slot widths.

Diagnosis

Conclusion

The profiler generates 1x and 2x resource candidates for the same breakpoint, multiplies each candidate's width by DPR, and carries both into PHP. PHP then uses each resource width as the CSS slot width for that shared breakpoint. Deduplication compares complete strings, so clauses with the same condition and different widths remain. The behavior is deterministic when both density candidates survive selection and filtering.

Where this likely occurs
  • assets/js/modules/srcset-detector.js — optmlSrcsetDetector._generateResponsiveSizes() lines 419–460 iterates both DPR multipliers for each breakpoint and assigns the same breakpoint to differently scaled widths.
  • assets/js/modules/srcset-detector.js — optmlSrcsetDetector._selectBestVariations() lines 531–585 intentionally retains selected 1x and 2x entries and deduplicates by resource width rather than breakpoint.
  • inc/tag_replacer.php — Optml_Tag_Replacer::add_missing_srcset_attributes() lines 487–517 creates a sizes clause from every retained candidate using the DPR-scaled width.
  • inc/tag_replacer.php — Optml_Tag_Replacer::add_missing_srcset_attributes() lines 553–578 applies array_unique() to complete clause strings, preserving same-breakpoint clauses with different widths.
  • inc/tag_replacer.php — Optml_Tag_Replacer::enhance_existing_sizes() lines 647–676 has the same complete-string deduplication behavior when extending an existing simple sizes value.
  • Commits 8ab74741721c and 49a757f34fd1 introduced the relevant profiler and generation path; the behavior remains in inspected v4.2.10.
Engineering notes

The path is primarily reachable with Retina Quality enabled because add_missing_srcset_attributes() filters out entries with DPR greater than one when the setting is disabled. Both candidates also have to survive natural-dimension validation, the variation limit, and container filtering. The duplicate clauses represent resource-density alternatives as CSS slot alternatives, although a sizes media list resolves the first matching condition rather than selecting among conditions by DPR.

Test coverage status

tests/test-srcset.php lines 112–169 and 211–224 cover distinct breakpoints only. assets/js/modules/__tests__/srcset-detector.test.js covers retention of 1x and 2x candidates but does not inspect rendered same-breakpoint sizes clauses. No relevant test found during inspection supplies density variants sharing a breakpoint and checks condition uniqueness. Tests were not executed during this read-only investigation.

What to verify or explore next
  • Reproduce with Retina Quality enabled and an image large enough for both density candidates to survive validation.
  • Inspect generated sizes output for repeated media conditions and record which clause appears first.
  • Compare selected resources before and after profile data is stored.
  • Run the targeted PHP srcset suite and JavaScript srcset-detector suite across images with and without existing simple sizes attributes.
Unknowns / follow-up

The exact ordering observed on the customer's page and the customer plugin version are unknown.

Confidence

Confidence: 97/100

Repository inspection confirms three independently verifiable defects in Optimole's page-profiler responsive-image path, and no matching GitHub issues were found. The reported Retina-disabled 1x behavior is intentional setting behavior covered by tests, so it is not included as a defect.

Source: HelpScout #3424946418
Generated by bug-report-triage (ID: bug-report-triage_6a87087cc5e402.90677248)

Lingua principale
PHP
Stelle
73
Fork
14
Merge medio
2g 13h
PR unite (30g)
16

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di Codeinwp/optimole-wp

Tutte le issue di Codeinwp/optimole-wp

Issue simili

Altre issue su PHP

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.