Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

Generated sizes attribute can contain duplicate max-width conditions

Đang mở
  • Có gì không ổn?
#1,113 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
52/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Ít trao đổi
Công nghệ
javascript, php, wordpress
Lĩnh vực
backend, frontend, web-dev

Hướng nghiên cứu

Bắt đầu với _generateResponsiveSizes() và _selectBestVariations() trong assets/js/modules/srcset-detector.js, sau đó lần theo add_missing_srcset_attributes() và enhance_existing_sizes() trong inc/tag_replacer.php. Chạy tests/test-srcset.php và bộ kiểm thử JavaScript của srcset-detector với Retina Quality và các breakpoint dùng chung. Được xem là hoàn tất khi các biến thể mật độ được giữ lại không còn tạo ra các điều kiện lặp lại mơ hồ trong các thuộc tính sizes được tạo.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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)

Ngôn ngữ chính
PHP
Star
73
Fork
14
Merge trung bình
2 ngày 12 giờ
Pull request đã merge (30 ngày)
18

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của Codeinwp/optimole-wp

Tất cả issue của Codeinwp/optimole-wp

Issue tương tự

Thêm issue về PHP

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.