Skip to content

Fix: blurred images on mobile — ch-viewport-width sent unconditionally, ch-dpr missing #1045

@selul

Description

@selul

Bug report

Support conversation: https://secure.helpscout.net/conversation/3253436872/484928?viewId=212385

What happened

A user reported blurred/low-quality images on mobile devices. Root cause analysis identified two related issues in add_permission_policy() (inc/admin.php):

  1. ch-viewport-width sent unconditionally — the Permissions-Policy header always delegated ch-viewport-width to the Optimole service URL, regardless of whether the Scale (image-scaling) setting was enabled. On high-DPR mobile devices this caused the CDN to size images to the CSS pixel width of the viewport, effectively ignoring the device pixel ratio and delivering under-sized (blurry) images.

  2. ch-dpr never sent — the ch-dpr Client Hint was never included in the policy, so the browser never forwarded the device pixel ratio to the CDN. Combined with the point above, retina/HiDPI mobile devices received 1× images displayed at 2× or 3× size.

Fix

Introduce conditional logic in the Permissions-Policy header:

  • ch-viewport-width — only delegated when the Scale setting (scale) is enabled
  • ch-dpr — delegated only when Retina images (retina_images) is enabled
  • ch-ect — delegated only when Network optimization (network_optimization) is enabled (existing behaviour, unchanged)
  • No header is emitted at all when none of the three settings are active

Extract the policy-string logic into a public get_permissions_policy() method to enable direct unit testing.

Unit tests

Eight PHPUnit tests added to tests/test-admin.php covering:

  • All settings off → empty string / no header
  • Each directive appears only when its corresponding setting is on
  • All three directives present when all settings are on
  • Service URL correctly embedded in the directive value

Metadata

Metadata

Assignees

Labels

bugThis label could be used to identify issues that are caused by a defect in the product.customer reportIndicates the request came from a customer.

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions